jQuery基础教程之遍历节点siblings()方法使用说明
2013-09-05 20:25
781 查看
本文章来给大家介绍jQuery基础教程之遍历节点siblings()方法使用说明,希望些方法对各位朋友有所帮助了。siblings()方法
.siblings([selector])
此方法获取每个匹配元素的前后所有的同辈元素,然后作为一个jquery包装集返回。另外还可以传递一个选择器表达式参数给它,在这些同辈元素中进行筛选。
接下来看两个例子:
上面jquery代码的结果是:
两个ul中的第一个和第三个li的背景会变成红色。
例
面的例子是没有传入选择器表达式参数的,那下面再给.siblings方法传入参数,看看结果是什么样的。
jquery代码2:
第一个ul中的第一个li背景颜色变成红色
例
.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>
相关文章推荐
- jQuery基础教程之DOM操作-遍历节点-siblings()方法
- jQuery基础教程之DOM操作-遍历节点-parents()方法
- jQuery基础教程之DOM操作-遍历节点-children()方法
- jQuery基础教程之DOM操作-遍历节点-prev()方法
- jQuery遍历节点-find()方法使用说明
- jQuery遍历节点-find()方法使用说明
- jQuery基础教程之DOM操作-遍历节点-prevUntil()方法
- jQuery基础教程之DOM操作-遍历节点-next()方法
- jQuery基础教程之DOM操作-遍历节点-parent()方法
- jQuery基础教程之DOM操作-遍历节点-prevAll()方法
- jQuery基础教程之DOM操作-遍历节点-find()方法
- jQuery基础教程之DOM操作-遍历节点-filter()方法
- jquery基础教程之deferred对象使用方法
- Jquery节点遍历next与nextAll方法使用示例
- jquery基础教程之deferred对象使用方法
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
- jquery基础实例教程详细使用说明
- jQuery基础教程--DOM遍历方法
- Jquery节点遍历next与nextAll方法使用示例
- python基础教程之简单入门说明(变量和控制语言使用方法)