jQuery遍历说、详解与示例的结合，轻松搞定这个遍历!

在之前又说到过jQuery的each()方法用于遍历，今天就是说一说jQuery中另一个用于遍历的方法，即JQ的siblings()方法，一起去看看吧！

一、siblings()方法

siblings()函数获得匹配集合中每个元素的同胞元素，通过选择器进行筛选是可选的。

如果给定一个表示DOM元素集合的jQuery 对象，siblings()方法允许我们在DOM树中搜索这些元素的同胞元素，并用匹配元素构造一个新的jQuery对象。该方法接受可选的选择器表达式，与我们向$()函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。

1、语法

.siblings(selector)

2、参数

selector字符串值，包含用于匹配元素的选择器表达式。

二、siblings()方法运用示例

示例一

siblings()方法不带参数的情况。

<ul>

<li class="item">我是一个li元素</li>

<li class="item">我是一个li元素</li>

<li class="item3">我是一个li元素</li>

<li>我是一个li元素</li>

<li>我是一个li元素</li>

</ul>

<script type="text/javascript">

$('.item3').siblings().css('background-color','red');

</script>

显示效果为：第1、2、4和5个li元素背景设置为红色。由于未使用选择器表达式(参数)，即所有同胞元素成为了对象的一部分。

示例二

siblings()方法带参数的情况。

<ul>

<li class="item">我是一个li元素</li>

<li class="item">我是一个li元素</li>

<li class="item3">我是一个li元素</li>

<li>我是一个li元素</li>

<li>我是一个li元素</li>

</ul>

<script type="text/javascript">

$('.item3').siblings('.item').css('background-color','red');

</script>

显示效果为：第1个和第2个类名为item的li元素背景设置为红色。由于使用了选择器表达式(.item)，即只有类名为item的同胞元素成为了对象的一部分。

示例三

siblings()方法运用于页面多项选择菜单样式控制。

siblings()方法运用示例

1、CSS代码

<style>

#menu{width:1200px;height:45px;}

#menu a{float:left;width:25%;background-color:#ccc;color:#666;line-height:45px;text-align:center;}

#menu .on{background-color:blue;color:#fff;}

</style>

2、HTML代码

<div id="menu">

<a href="javascript:" onclick="menuclick(this)" class="on">首页</a>

<a href="javascript:" onclick="menuclick(this)">关于我们</a>

<a href="javascript:" onclick="menuclick(this)">服务项目</a>

<a href="javascript:" onclick="menuclick(this)">个人中心</a>

</div>

3、JS代码

<script type="text/javascript">

function menuclick(obj){

$('#menu a').siblings().css('class','out');

$(obj).css('class','on');

......(其它执行项);

}

</script>

注：运用siblings()方法查找同胞元素时，原始元素不包含在同胞元素中。

感谢您阅读了这篇文章，希望会对您有所帮助。喜欢我就关注我吧，后面的文章内容会越来越精彩喔！