:jQuery / Sizzle 中的 nth-of-type()？
令我惊讶的是 Sizzle （jQuery 使用的选择器引擎）带有内置 :nth-child( ) 选择器，但缺少 :nth-of-type() 选择器。
为了说明 :nth-child() 和 :nth-of-type() 之间的区别并说明问题，请考虑 以下 HTML 文档：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>:nth-of-type() in Sizzle/jQuery?</title>
<style>
body p:nth-of-type(2n) { background: red; }
</style>
</head>
<body>
<p>The following CSS is applied to this document:</p>
<pre>body p:nth-of-type(2n) { background: red; }</pre>
<p>This is paragraph #1.</p>
<p>This is paragraph #2. (Should be matched.)</p>
<p>This is paragraph #3.</p>
<p>This is paragraph #4. (Should be matched.)</p>
<div>This is not a paragraph, but a <code>div</code>.</div>
<p>This is paragraph #5.</p>
<p>This is paragraph #6. (Should be matched.)</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(function() {
// The following should give every second paragraph (those that had red backgrounds already after the CSS was applied) an orange background.
// $('body p:nth-of-type(2n)').css('background', 'orange');
});
</script>
</body>
</html>
由于 Sizzle 使用浏览器原生 querySelector() 和 querySelectorAll() 方法（如果存在）（即在已经实现 Selectors API 的浏览器中），像 $('body p:nth-child'); 这样的东西当然可以工作。但它在旧版浏览器中不起作用，因为 Sizzle 没有此选择器的后备方法。
是否可以轻松地将 :nth-of-type() 选择器添加到 Sizzle，或者在 jQuery 中实现它（通过使用 内置 :nth-child() 选择器，也许）？ 带参数的自定义选择器将是好的。
It surprised me that Sizzle (the selector engine jQuery uses) comes with a built-in :nth-child() selector, but lacks an :nth-of-type() selector.
To illustrate the difference between :nth-child() and :nth-of-type() and to illustrate the problem, consider the following HTML document:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>:nth-of-type() in Sizzle/jQuery?</title>
<style>
body p:nth-of-type(2n) { background: red; }
</style>
</head>
<body>
<p>The following CSS is applied to this document:</p>
<pre>body p:nth-of-type(2n) { background: red; }</pre>
<p>This is paragraph #1.</p>
<p>This is paragraph #2. (Should be matched.)</p>
<p>This is paragraph #3.</p>
<p>This is paragraph #4. (Should be matched.)</p>
<div>This is not a paragraph, but a <code>div</code>.</div>
<p>This is paragraph #5.</p>
<p>This is paragraph #6. (Should be matched.)</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(function() {
// The following should give every second paragraph (those that had red backgrounds already after the CSS was applied) an orange background.
// $('body p:nth-of-type(2n)').css('background', 'orange');
});
</script>
</body>
</html>
Since Sizzle uses the browser-native querySelector() and querySelectorAll() methods if those are present (i.e. in browsers that already implement the Selectors API), stuff like $('body p:nth-child'); will of course work. It won’t work in older browsers though, because Sizzle has no fallback method for this selector.
Is it possible to easily add the :nth-of-type() selector to Sizzle, or to implement it in jQuery (by using the built-in :nth-child() selector, perhaps)? A custom selector with parameters would be nice.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
测试用例 -（检查 IE 或重命名选择器）
您当然也可以添加偶数&奇数：
Test case - (check in IE or rename the selector)
You can of course add even & odd too:
jQuery 插件 moreSelectors 支持 nth-of-type （以及许多其他选择器）。我建议要么使用它，要么简单地实现一个简单的插件，仅实现您需要的确切选择器。您应该能够从那里复制粘贴代码。
快乐黑客！
the jQuery plugin moreSelectors has support for nth-of-type (and many other selectors). I suggest either using that, or simply implement a simple plugin that only implements the exact selectors you need. You should be able to copy-paste code from there.
Happy hacking!
我无法假装知道 nth-of-type 是如何实现的，但 jQuery 确实提供了一种机制，您可以通过该机制创建自己的自定义选择器。
以下问题涉及自定义选择器，可能会为您提供有用的见解
您编写了哪些有用的自定义 jQuery 选择器？
I can't pretend to know how nth-of-type is implemented, but jQuery does provide a mechanism by which you can create your own custom selector.
The following question deals with custom selectors, and may provide a useful insight to you
What useful custom jQuery selectors have you written?