:nth-of-type()在jQuery / Sizzle? [英] :nth-of-type() in jQuery / Sizzle?
问题描述
令我惊讶的是, Sizzle (jQuery使用的选择器引擎)附带了一个内置的:nth-child()
选择器,但缺少:nth-of-type()
选择器。
为了说明:nth-child()
和:nth-of-type()
并说明问题,请考虑以下HTML文档:
<!doctype html>
< html>
< head>
< meta charset =utf-8>
< title>:Sizzle / jQuery中的nth-of-type()?< / title>
< style>
body p:nth-of-type(2n){background:red; }
< / style>
< / head>
< body>
< p>以下CSS应用于此文档:< / p>
< pre> body p:nth-of-type(2n){background:red; }< / pre>
< p>这是段落#1。< / p>
< p>这是段落#2。 (应匹配。)< / p>
< p>这是第#3段。< / p>
< p>这是第4段。 (应匹配。)< / p>
< div>这不是一个段落,而是一个< code> div< / code>。< / div>
< p>这是第#5段。< / p>
< p>这是第6段。 (应匹配。)< / p>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js>< / script>
< script>
$(function(){
//下面应该给出每秒的段落(在应用CSS之后已经有红色背景的段落)橙色背景
// $('body p:nth-of-type(2n)')css('background','orange');
});
< / script>
< / body>
< / html>因为Sizzle使用浏览器本身的 querySelector()$ c $ c>和 querySelectorAll()
方法(即在已经实现 Selectors API ),像 $('body p:nth-child');
它不能在旧的浏览器中工作,因为Sizzle没有为这个选择器的后备方法。
可以轻松地添加:nth -of-type()
选择器到Sizzle,或者在jQuery中实现它(通过使用内置的:nth-child()
selector ,可能)?具有参数的自定义选择器将是很好。
解决方案
/ **
*
*返回false以排除当前元素
* /
$ .expr [':'] ['nth-of-type'] = function(elem,i,match){
if(match [3] .indexOf(n)=== -1)return i + 1 == match [3];
var parts = match [3] .split(+);
return(i + 1 - (parts [1] || 0))%parseInt(parts [0],10)=== 0;
};
测试用例 - (检入IE或重命名选择器)
: = match [3] ==even? 2N:match [3] ==odd? 2n + 1:match [3];
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.
/**
* Return true to include current element
* Return false to exclude current element
*/
$.expr[':']['nth-of-type'] = function(elem, i, match) {
if (match[3].indexOf("n") === -1) return i + 1 == match[3];
var parts = match[3].split("+");
return (i + 1 - (parts[1] || 0)) % parseInt(parts[0], 10) === 0;
};
Test case - (check in IE or rename the selector)
You can of course add even & odd too:
match[3] = match[3] == "even" ? "2n" : match[3] == "odd" ? "2n+1" : match[3];
这篇关于:nth-of-type()在jQuery / Sizzle?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!