全栈工程师开发手册 (作者:栾鹏)

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的列表