jQuery | :nth-child() 选择器

在 jQuery 中，:nth-child() 选择器用于选取指定父元素下的某个特定位置的子元素，其语法如下：

$(":nth-child(index/even/odd/equation)")

index 表示要选取的子元素的位置，从 1 开始计数。

如果你想选取偶数位置的子元素，可以使用 :nth-child(even)。同理，如果你想选取奇数位置的子元素，可以使用 :nth-child(odd)。

此外，还可以使用复杂的公式来选择子元素。比如，要选取第 3n+1 个子元素，可以使用 :nth-child(3n+1)。

以下是一些示例代码，用于说明 :nth-child() 选择器的使用方法。

// 选取第二个子元素，并设置背景色为红色
$("li:nth-child(2)").css("background-color", "red");

// 选取偶数位置的子元素，并设置字体为粗体
$("ul:nth-child(even) li").css("font-weight", "bold");

// 选取第三个、第四个和第五个子元素，并将它们的文本颠倒过来
$("div:nth-child(n+3):nth-child(-n+5)").each(function() {
  $(this).text($(this).text().split("").reverse().join(""));
});

尽管 :nth-child() 选择器非常有用，但使用它时需要格外小心，因为它可能会非常耗费性能。建议尽量使用其他选择器来提高性能，比如 :first-child 或 :last-child。