<div class="aa" data-id="father">

<ul class="bb" data-id="brother">brother</ul>

<ul class="bb" data-id="my home" id="me" style="border:1px solid #333">click me

<li class="cc" data-id="son">son</li>

<li class="cc" data-id="daughter">daughter</li>

</ul>

<ul class="bb" data-id="sister">sister</ul>

</div>

<script>

$("#me").click(function(){

alert($(this).data("id")); //自身

alert($(this).parent(".aa").data("id")); //父元素

alert($(this).parent().data("id")); //父元素，与上一句相同

alert($(this).children(".cc").data("id")); //第一个子元素

alert($(this).children().data("id")); //第一个子元素，与上一句相同

alert($(this).siblings(".bb").data("id")); //第一个同辈元素

alert($(this).siblings().data("id")); //第一个同辈元素，与上一句相同

alert($(this).siblings(".bb:last").data("id")); //最后一个同辈元素

})

</script>

父元素与子元素可多次连用，如$(this).parent().parent(".aa")，又或者$(this).parents(".aa")。

另外需要注意的是，IE对DOM的解释执行与Chrome、FF等不同，用siblings可能会出现问题，具体原因我也不清楚，我就遇上这种情况：IE下，用parent("").siblings("")取不到正确对象，而用parents("").find("")就可以。