jQuery | :nth-of-type() 选择器

在 jQuery 中，:nth-of-type() 选择器可用来匹配某个父元素中的指定类型的子元素中的第几个，其语法如下：

$(“父元素 > 指定类型子元素:nth-of-type(编号)”)

其中，编号 指定要匹配的子元素所在位置，可以是正整数、负整数或者表达式。

用法示例

选取第 n 个子元素

要选取某个父元素下的第 n 个指定类型子元素，可以使用如下代码：

// 选取第 2 个 p 元素
$("div > p:nth-of-type(2)")

其中，div 是作为父元素的 jQuery 选择器，p 是指定类型子元素，2 是要匹配的子元素在其兄弟元素中的索引。

选取某个子元素之后的元素

如果要选取某指定类型子元素后的所有同类型子元素，可以使用表达式，如下所示：

// 选取所有 .test 元素之后的所有 .test 元素
$(".test:nth-of-type(n+2)")

其中，n+2 表示从第 2 个 .test 元素开始匹配。

选取某个子元素之前的元素

如果要选取某指定类型子元素前的所有同类型子元素，可以通过结合 :not 和 :last-of-type 选择器实现，如下所示：

// 选取所有 .test 元素之前的所有 .test 元素
$(".test:not(:nth-of-type(n+2))")

其中，:not(:nth-of-type(n+2)) 表示排除前两个 .test 元素，即匹配前两个 .test 元素之前的所有同类型子元素。

总结

使用 jQuery 中的 :nth-of-type() 选择器可以方便地选取某个父元素下的指定类型子元素中的第几个，支持多种用法，如选取某个子元素之后的所有同类型子元素、选取某个子元素之前的所有同类型子元素等等。