个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
令我惊讶的是Sizzle (jQuery 使用的选择器引擎)带有内置的 :nth-child() 选择器，但缺少 :nth-of-type() 选择器。
为了说明 :nth-child() 和 :nth-of-type() 之间的差异并说明问题，请考虑 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>
由于 Sizzle 使用浏览器原生的 querySelector() 和 querySelectorAll() 方法(如果存在)(即在已经实现 Selectors API 的浏览器中)，像 $('body p:nth-child'); 当然可以。但它在旧版浏览器中不起作用，因为 Sizzle 没有此选择器的后备方法。
是否可以轻松地将 :nth-of-type() 选择器添加到 Sizzle，或者在 jQuery 中实现它(也许可以使用 the built-in :nth-child() selector )？一个custom selector with parameters那就太好了。
最佳答案
/**
* 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 -(检查 IE 或重命名选择器)
您当然也可以添加偶数和奇数:
match[3] = match[3] == "even" ? "2n" : match[3] == "odd" ? "2n+1" : match[3];
关于jquery - :nth-of-type() in jQuery/Sizzle?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2093355/
25
4
0
我需要选择具有特定 URL 格式的链接。 我可以使用 sizzle 根据正则表达式评估链接的 href 属性吗？ 例如，我可以这样做吗: var arrayOfLinks = Sizzle('a[HR
谁能告诉我 sizzle 是否支持选择器中的命名空间？如果支持的话谁能给我一些例子，我在API文档中找不到这样的信息。 谢谢! 最佳答案 不，Sizzle 不支持命名空间选择器。 CSS select
有没有办法只使用 jQuery/sizzle 的 CSS 选择器来获取所选元素的父元素？ 我需要能够在使用 jQuery 时获取元素的父元素，但我无法使用 jQuery('#myelement').p
我已经知道如何使用 Sizzle CSS 选择器引擎。 这是语法:Sizzle( selector ); 那么现在我的问题是:Sizzle CSS 选择器引擎有什么用？ 最佳答案 Sizzle 比 j
如果使用 RegExp 对象在 JavaScript 中创建的正则表达式中的转义字符需要再次转义，sizzle.js 中的以下代码如何工作 - identifier = "(?:\\\\.|[\\w-
我从 jQuery 1.6(不记得确切的版本)迁移到 jQuery 3.3.1，并且在以下代码中遇到错误: //datatable row click events $('#@mainDatatabl
我已经阅读了有关 Sizzle 是什么以及它为元素添加的属性是什么的其他问题和答案，但没有一个回答为什么它发生的问题。 我有以下设置: 使用 JQuery 1.10.2 的 HTML5 代码库。 3
为什么 Sizzle 从右到左评估选择器？谁能给我举个例子来解释为什么选择器从右到左计算比从左到右计算速度更快？ 如this前面提到，浏览器与通常的 jQuery 不同。如果不是为了更快，它是否只遵循
我在查看一个学校项目的 sizzle.js 源代码时，发现了一些奇怪的东西。在代码的底部有这行代码说: window.Sizzle = Sizzle; 但是我在代码中找不到任何关于 a 的内容: va
根据我的理解，Sizzle 返回一个对象数组 (DOMElements)，我试图在 for 循环中遍历该对象数组，但出现错误。当我试图通过 obj[index-number]["property"]
Sizzle 不会返回与选择器匹配的所有元素。这是JSBin Demo显示问题。 HTML Playing with Sizzle JS Item 1 Item 2
有人熟悉 Sizzle 吗？是否支持选择缓存 DOM 节点的子节点？像 jQuery: var body = jQuery('body'); var div = jQuery('#mydiv',bod
有没有办法在不运行 Sizzle 选择器的情况下验证(验证其构造是否正确)？ 最佳答案 好吧，正如 Russ 所说，由于 Sizzle 解释了选择器，所以它无法在不评估它的情况下对其进行验证。 但是，
我从 https://github.com/jquery/sizzle 下载了 sizzle.js我的代码是: Demo window.on
令我惊讶的是Sizzle (jQuery 使用的选择器引擎)带有内置的 :nth-child() 选择器，但缺少 :nth-of-type() 选择器。 为了说明 :nth-child() 和 :nt
我发现我需要完全支持 jQuery 不提供的 DOM textNode 的选择器。 jQuery 忽略文本节点，可能是因为大多数页面在标签之间有大量不相关的空白节点，不同的浏览器可以不同地对待这些节点
我不完全确定这里发生了什么。我的代码如下: var mycode = { init:function(){ //my code here } } //sizzle pa
我们将 HTML Unit v2.6 与 Web-Harvest 结合使用，并扩展其功能以创建新元素 username password 当我们运行这个时，我们会在元素加载指定的 URL 时遇
我看到了一些关于在 dojo 中使用 Sizzle 作为选择器引擎的问题 ( replace dojo.query with Sizzle? )，并且知道这是可能的，但似乎找不到任何有关如何进行操作的
在 DevTools 中使用“配置文件”调试我的应用程序时，我发现“分离的 DOM 树”不断累积。这些分离的节点具有主要由 checkContext 函数组成的保留树(来自 sizzle inside
我是一名优秀的程序员,十分优秀！