Jquery siblings 注意事项

假如有如下代码片段：

  <div><span>Hello</span></div>
  <p class="selected">Hello Again</p>
  <span>And Again</span>

<script>
$("p.selected").siblings().css("background", "yellow");
</script>

 将会产生以下结果：

 第二行的背景不会被改变，刚开始很诧异。

无意间做了个测试，稍微改变代码如下：

 <div><span>Hello</span></div>
  <p class="selected">Hello Again</p>
  <p class="selected">Hello Again</p>
  <span>And Again</span>

<script>
$("p.selected").siblings().css("background", "yellow");
</script>

 注意上面的改动为增加了一行“<p class="selected">Hello Again</p>”， 现在有两行<p>了。

改动后的结果如下：

 

现在来理解下siblings的 含义，Jquery的siblings函数用来找到所有该元素的同胞。既然是找同胞，当然不包括自己了。所以第一个代码片段里面找出了<p>的所有同胞改变他们的背景。

到第二个代码片段里面第一个<p>找同胞找到了第二个<p>,第二个<p>找同胞找到第一个<p>，所以最后他们都被改变背景了。

 

刚开始学习siblings的时候产生过疑惑，写点笔记以免将来忘记。

 理解重点： siblings遍历所有同胞元素，但不包括自己。