<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()获取到的是所有兄弟元素(包括自己)。
联系客服