jquery子元素过滤选择器:nth-child、:first-child、:last-child、:only-child
2017-08-28 10:25
441 查看
全栈工程师开发手册 (作者:栾鹏)
jquery系列教程1-选择器全解
通过冒号前加空格实现。和基本过滤器的区别:基本过滤器冒号前没有空格,基本过滤器对元素进行操作,获取元素列表,此处的过滤器对父元素进行操作,获取子元素列表
代码如下:
jquery系列教程1-选择器全解
jquery子元素过滤选择器
jquery子元素过滤选择器,包括:nth-child、:first-child、:last-child、:only-child,具体功能如代码中注释。通过冒号前加空格实现。和基本过滤器的区别:基本过滤器冒号前没有空格,基本过滤器对元素进行操作,获取元素列表,此处的过滤器对父元素进行操作,获取子元素列表
代码如下:
$("div :nth-child(2)"); //获取每个div下的第2个子元素,索引从1开始 $("div :nth-child(even)"); //获取每个div下的索引为偶数的子元素,索引从1开始 $("div :nth-child(odd)"); //获取每个div下的索引为奇数的子元素,索引从1开始 $("div :nth-child(3n+1)"); //获取每个div下的索引为3n+1的子元素,索引从1开始 $("div label:first-child"); //获取每个div下的第一个label列表 $("div label:last-child"); //获取每个div下的最后一个label列表 $("div label:only-child"); //获取每个div下的是唯一子元素的label的列表
相关文章推荐
- nth-child,nth-of-type,first-of-type,last-of-type,nth-last-of-type,only-of-type等的区别
- CSS选取第几个标签元素:nth-child、first-child、last-child
- CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
- CSS3中first-child、last-child、nth-child、nth-last-child
- css:first-child、last-child、nth-child、 nth-last-child
- CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
- css中的first-child nth-child nth-last-child() 和:nth-of-type(n)
- [CSS] DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)
- CSS3中first-child、last-child、nth-child、nth-last-child
- css3 - 选择器first-child、last-child、nth-child、nth-last-child、nth-of-type
- CSS选取第几个标签元素:nth-child(n)、first-child、last-child
- CSS选取第几个标签元素:nth-child、first-child、last-child
- CSS中的第一个:first-letter 最后一个:last-child 第n个:nth-child 伪元素
- first VS first child , last VS last-child
- CSS中first-child和nth-child的讲解
- 让IE7/8使用CSS中first-child和last-child样式属性
- first-of-type,nth-of-type,last-of-type分类问题
- :nth-last-child() | CSS属性参考
- :nth-child :nth-last-child 和 :last-child
- Oracle SQL 分析函数 first、last、first_value、last_value、nth_value