jQuery的:nth-child(n)选择器用于匹配作为父元素下的第n个(或特定顺序的)子元素的元素,将其封装为jQuery对象并返回。
与该选择器相对的是:nth-last-child(n)选择器,用于匹配作为父元素下的倒数第n个(或符合特定倒数顺序的)子元素。
注意::nth-child(n)选择器与:eq(index)选择器的不同之处在于:
:eq(index)选择器只匹配一个元素,并且是所有匹配到的元素中的第index + 1
个元素(索引index
从0开始算起);
:nth-child(n)选择器则需要判断匹配到的元素是否是其父元素的第n
个子元素或符合其他特定要求(序号n
从1开始算起),如果是就保留,否则将被舍弃。
语法
jQuery1.1.4 新增该选择器。
参数
参数 | 描述 |
---|---|
selector | 一个有效的选择器。 |
n | 指定的序号,从1开始计数。 |
参数n
一般是一个自然数,表示作为父元素下的第n
个子元素。例如::nth-child(2)表示作为父元素的第2个子元素。
参数n
也可以为特定的表达式(表达式中只能使用字母n
表示自然数,大小写均可)。例如:
- :nth-child(odd)表示匹配作为父元素的奇数(第1、3、5、7……个)子元素的元素;
- :nth-child(even)表示匹配作为父元素的偶数(第2、4、6、8……个)子元素的元素;
- :nth-child(3n)表示匹配作为父元素的第
3n
个子元素的元素(n表示包括0在内的自然数,下同); - :nth-child(3n+1)表示匹配作为父元素的第
3n+1
个子元素的元素; - :nth-child(3n+2)表示匹配作为父元素的第
3n+2
个子元素的元素;
返回值
返回封装了匹配到的元素的jQuery对象。
如果找不到任何相应的匹配,则返回一个空的jQuery对象。
jQuery先会根据选择器selector
去查找所有匹配的元素,再看它们是否是父元素的符合指定顺序的子元素,如果是就保留,否则舍弃掉该元素。
示例&说明
以下面这段HTML代码为例:
现在,我们想要为每个ul标签内查找它的第2个li标签,则可以编写如下jQuery代码:
接着,为每个ul标签查找自然顺序为奇数的li标签,则可以编写如下jQuery代码:
为每个ul父标签查找自然顺序为3n
的li标签,对应的jQuery代码如下:
查找所有包含类名c
的li标签,并且它们必须是父元素的偶数顺序的子元素,我们可以编写如下jQuery代码:
0 条评论
撰写评论