jquery子元素过滤选择器:nthchild、:firstchild、:lastchild、:onlychild

全栈工程师开发手册 &＃xff08;作者&＃xff1a;栾鹏&＃xff09;

jquery系列教程1-选择器全解

jquery子元素过滤选择器

jquery子元素过滤选择器&＃xff0c;包括:nth-child、:first-child、:last-child、:only-child&＃xff0c;具体功能如代码中注释。

通过冒号前加空格实现。和基本过滤器的区别&＃xff1a;基本过滤器冒号前没有空格&＃xff0c;基本过滤器对元素进行操作&＃xff0c;获取元素列表&＃xff0c;此处的过滤器对父元素进行操作&＃xff0c;获取子元素列表

代码如下&＃xff1a;

$("div :nth-child(2)");//获取每个div下的第2个子元素&＃xff0c;索引从1开始
$("div :nth-child(even)");//获取每个div下的索引为偶数的子元素&＃xff0c;索引从1开始
$("div :nth-child(odd)"); //获取每个div下的索引为奇数的子元素&＃xff0c;索引从1开始
$("div :nth-child(3n&＃43;1)"); //获取每个div下的索引为3n&＃43;1的子元素&＃xff0c;索引从1开始
$("div label:first-child"); //获取每个div下的第一个label列表
$("div label:last-child");//获取每个div下的最后一个label列表
$("div label:only-child");//获取每个div下的是唯一子元素的label的列表