什么是：jQuery中的nth（）伪类选择器？

Question

:nth伪类的定义是什么？

我找不到任何jQuery或CSS文档，但似乎存在：

var $list = $('<ul><li>1</li><li>2</li><li>3</li></ul>');

$list.find('li:nth(2)').text();

返回："3"，

while：

 $list.find('li:nth-of-type(2)').text();
 $list.find('li:nth-child(2)').text();

都返回"2"

这个伪类是什么？有人能指出我的一些文件吗？

Answer 1

什么是：nth（）选择器？

与其他答案相反，:nth() 不是 CSS伪类选择器。

这是Sizzle engine中使用的一个鲜为人知的位置选择器：

  

:nth:在页面上查找nth元素。

您会找到上面的定义here in the Github documentation for Sizzle。

为什么选择不同的元素：nth-​​child（）/：nth-​​of-type（）？

nth()和您的其他选择器选择不同元素的原因是nth()是从零开始的索引选择器，而CSS选择器是 one-基于索引选择器。

这是多么容易理解，因为大多数人会认为nth()会与类似命名的CSS伪类选择器（如nth-child()和nth-of-type()保持某种一致性 - 但是如上所述，它们实际上并不相关。

所以，：nth（）的功能实际上更接近：eq（）然后呢？

是。事实上，好像nth() is exactly the same as eq()：

Expr.pseudos["nth"] = Expr.pseudos["eq"];

This old mailing list conversation（2007）暗示John Resig计划删除:nth()选择器，因为：

  

“我搜查了这些小组，但我似乎找不到任何相关的谈话   这个。如果有的话，使用:eq(n)和。{   :nth(n)？在我开始标准化之前或之前我想知道   其他。谢谢。“ - Matt Penner

     

“它们是相同的，所以你可以使用你喜欢的任何一种。来自jquery.js：nth: "m[3]-0==i", eq: "m[3]-0==i"” - Karl Swedberg

     

“嗯......我应该核武:nth()。” - John Resig

但是，正如您所注意到的那样，:nth()选择器的删除从未实现（截至2013年，无论如何）。

示例用法：

<强> HTML：

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

<强> jQuery的：

$('p:nth(2)').text(); // Returns 3 as zero-based index.
$('p:eq(2)').text(); // Returns 3 as zero-based index.
$('p:nth-child(2)').text(); // Returns 2 as one-based index.
$('p:nth-of-type(2)').text(); // Returns 2 as one-based index.

jsFiddle version here.