jquery 选择器 儿子 兄弟 children siblings find

<div class="ancestor">

<div class="grandpa1">

    <div class="father11"></div>

        <div class="father12"></div>

        <div class="father13"></div>

    </div>

    <div class="grandpa2">

    <div class="father21"></div>

        <div class="father22"></div>

        <div class="father23"></div>

    </div>

    <div class="grandpa3">

    <div class="father31"></div>

        <div class="father32"></div>

        <div class="father33"></div>

    </div>

</div>

var grandpa = $('div.ancestor').children()拿到的是3个子元素：grandpa1 grandpa2 grandpa3，

var father = grandpa.children()拿到的是9个子元素：father11 father12...father32 father33

如果删除father11 father12 father13 father31 father32 father33，即

<div class="ancestor">

    <div class="grandpa1"></div>

    <div class="grandpa2">

    <div class="father21"></div>

        <div class="father22"></div>

        <div class="father23"></div>

    </div>

    <div class="grandpa3"></div>

</div>

grandpa.children()拿到的是3个子元素：father21 father22 father23

总结：children()拿的是某同一层级的元素

------------------------------------siblings()-----------------------------------------

DOM 树：该方法沿着 DOM 元素的同级元素向前和向后遍历。

提示：请使用 prev() 或 next() 方法来缩小范围，在只搜索前一个同级元素或后一个同级元素时。

<div style="width:500px;" class="siblings">

<ul>ul (父节点)  

<li>li (类名为"star"的上一个兄弟节点)</li>

<li>li (类名为"star"的上一个兄弟节点)</li>

<li class="start">li (兄弟节点)</li>

<li>li (类名为"star"的下一个兄弟节点)</li>

<li>li (类名为"star"的下一个兄弟节点)</li>

</ul>   

</div>

$("li.start").siblings().css({"color":"red","border":"2px solid red"});

注意：

当$("xxx")拿到的是一个元素时（例如$("li.start")），siblings()获取到的是除自己之外的其他兄弟元素。

当$("xxx")拿到的是多个元素时（例如$("li")），siblings()获取到的是所有兄弟元素(包括自己)。