jQuery :nth-child() 选择器

jQuer 选择器

:nth-child(n)选择器选择所有属于其父元素的第n个子元素的元素。

使用:nth-of-type()选择器选择所有属于其父元素的特定类型的第n个子元素的所有元素。

语法:

$(":nth-child(number|An+B|odd|even)")

实例

选择作为其父级的第三个子级的每个<p>元素:

$(document).ready(function(){
  $("p:nth-child(3)").css("background", "coral");
});
测试看看‹/›

奇数和偶数关键字用于匹配索引为奇数或偶数的子元素:

$(document).ready(function(){
  $("p:nth-child(even)").css("background", "coral");
  $("li:nth-child(odd)").css("background", "coral");
});
测试看看‹/›

使用公式(An + B)。说明:A表示一个循环大小,n是一个计数器(从0开始),而B是一个偏移值:

$(document).ready(function(){
  $("p:nth-child(4n + 1)").css("background", "coral");
  $("li:nth-child(3n)").css("background", "coral");
});
测试看看‹/›

参数值

参数描述
number每个要匹配的孩子的索引(从1开始)
odd选择每个奇数子元素
even选择每个偶数子元素
An+B指定要选择的子元素
示例:p:nth-child(3n + 2)从第二个子元素开始选择每个第三段

jQuer 选择器