什么是: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",

而:

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

都归来了 "2"

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

Answer 1

什么是:nth()选择器？

相反,其他的答案,:nth()是不是一个CSS伪类选择.

它是Sizzle引擎中一个鲜为人知的位置选择器:

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

您可以在Sizzle的Github文档中找到上面的定义.

为什么选择不同的元素:nth-​​child()/:nth-​​of-type()？

其原因nth()和你的其他选择选择不同的元素,因为nth()是一个从零开始的索引选择,而CSS选择器是一开始的索引选择.

这是可以理解如何可能会造成混淆,因为大多数会认为nth()将保持某种一致性与类似命名的CSS伪类选择,如nth-child()和nth-of-type()-然而,如前所述,他们实际上并没有关系.

那么,:nth()的功能实际上更接近:eq()然后呢？

是.事实上,似乎nth()与eq()完全相同:

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

这个旧的邮件列表对话(2007)暗示John Resig计划删除:nth()选择器,因为:

"我已经搜索了这些小组,但我似乎无法找到任何相关的谈话.如果有的话,使用:eq(n)和 之间的区别是:nth(n)什么？我想在我开始标准化之前知道.谢谢". - 马特彭纳

"他们是一样的,所以你可以使用你喜欢的任何一种.来自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版本.