siblings函数作用及实用jquery实现导航栏效果

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
如果我们从第三个项目开始，则可找到该元素的同胞元素：
$('li.third-item').siblings().css('background-color', 'red');

此处调用的结果是将项目 1、2、4 和 5 的背景设置为红色。由于我们未应用选择器表达式，所有同胞元素很自然地成为了对象的一部分。如果已应用选择器，则只会包含四个列表中的匹配的项目。

原始元素不包含在同胞元素中，当我们打算找到 DOM 树的特定层级上的所有元素时，记住一点很重要。


使用jQuery实现导航栏效果：
$(".has_children").click(function(){
$(this).addClass("highlight").children("a").show().end().siblings().
removeClass("highlight").children("a").hide();
});

这段代码的作用是，当鼠标单击到class中含有has_children的元素上的时候，给其添加一个名为highlight的class，然后将其内部<a>子元素都显示出来，并且被单击

的class中含有has_children元素的同辈元素都去掉一个名为highlight的class，同时同辈元素内部的<a>子元素全部隐藏。

改变一下代码风格：
$(".has_children").click(function(){
$(this).addClass("highlight") //为当前元素增加highlight类
.children("a").show().end() //将子节点的<a>元素显示出来并重新定位到上次操作的元素
.siblings().removeClass("highlight") //获取元素的兄弟元素，并去掉它们的highlight类
.children("a").hide(); //将兄弟元素下的<a>元素隐藏
});