您的位置:首页 > Web前端 > JQuery

jQuery基础教程之遍历节点siblings()方法使用说明

2013-09-05 20:25 781 查看
本文章来给大家介绍jQuery基础教程之遍历节点siblings()方法使用说明,希望些方法对各位朋友有所帮助了。siblings()方法
.siblings([selector])
此方法获取每个匹配元素的前后所有的同辈元素,然后作为一个jquery包装集返回。另外还可以传递一个选择器表达式参数给它,在这些同辈元素中进行筛选。
接下来看两个例子:
<ul> 
    <li>第一个li</li> 
    <li class="li2">第二个li</li> 
    <li>第三个li</li> 
</ul> 
<ul> 
    <li>第一个li</li> 
    <li class="li2">第二个li</li> 
    <li>第三个li</li> 
</ul>
$(".li2").siblings().css("background","#FF0000");

上面jquery代码的结果是:
两个ul中的第一个和第三个li的背景会变成红色。

<ul>
    <li>第一个li</li>
    <li class="li2">第二个li</li>
    <li>第三个li</li>
</ul>
<ul>
    <li>第一个li</li>
    <li class="li2">第二个li</li>
    <li>第三个li</li>
</ul>
<script>
$(".li2").siblings().css("background","#FF0000");
</script>

面的例子是没有传入选择器表达式参数的,那下面再给.siblings方法传入参数,看看结果是什么样的。
jquery代码2:
$(".li2").siblings(":first").css("background","#FF0000");
上面的jquery代码运行的结果是:
第一个ul中的第一个li背景颜色变成红色

<ul>
    <li>第一个li</li>
    <li class="li2">第二个li</li>
    <li>第三个li</li>
</ul>
<ul>
    <li>第一个li</li>
    <li class="li2">第二个li</li>
    <li>第三个li</li>
</ul>
<script>
$(".li2").siblings(":first").css("background","#FF0000");
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: