jQuery 非选择器似乎不适用于类
好吧,另一个愚蠢的 jQuery 问题...
jQuery 中的 not
选择器给我带来了问题。 我正在尝试选择除第一个具有给定类切换按钮
的元素之外的所有元素。但我可以与控制台进行对话...
? $('.toggle-button').length
4
? $('.toggle-button:not(:eq(0))').length
4
没有区别。但是……
? $('div').length
23
? $('div:not(:eq(0))').length
22
是什么造成的,雷西格?
为什么 not
选择器在应用于类时(看起来)有不同的行为 - 我怎样才能以最惯用的 jQuery 方式进行我想要的选择?
:not(:first)
做同样的事情...
更新
感谢您的所有回复。这看起来是 jQuery/IE 合作关系中的一个错误。
解决方案...
$('.toggle-button').filter(':gt(0)')
$('.toggle-button').not(':first')
$('.toggle-button').slice(0);
...毫无疑问还有更多。我会把它留给疯狂的人来决定哪个是最好的:D
Ok another dumb jQuery question...
The not
selector in jQuery is giving me problems. I'm trying to select all but the first element having a given class toggle-button
. But I can have this dialogue with the console...
? $('.toggle-button').length
4
? $('.toggle-button:not(:eq(0))').length
4
No difference. But...
? $('div').length
23
? $('div:not(:eq(0))').length
22
What gives, Resig?
Why does the not
selector have different behaviour when applied to a class (seemingly) - and how can I do the select I want in the most idiomatic jQuery way?
:not(:first)
does the same thing...
UPDATE
Thanks for all responses. This looks to be a bug in the jQuery/IE partnership.
Solutions...
$('.toggle-button').filter(':gt(0)')
$('.toggle-button').not(':first')
$('.toggle-button').slice(0);
...and no doubt many more. I'll leave it to the crazies to figure which is best :D
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
任何非 CSS 过滤/选择都应该通过 jQuery 方法完成,因为这意味着 jQuery 无法使用 CSS 来加速选择器。它尝试使用浏览器中的原生 CSS 支持,但如果您使用
:not
或:eq
等,它必须使用自己的解析系统,该系统速度较慢。空气引号的“正确”方式是这样的:
至于为什么
:not
的行为不同,我不确定。我会继续思考,如果我得到一个灯泡,我会更新这个答案:)编辑:它看起来像是一些特定于浏览器的怪癖 - 我刚刚完成了
$('.prettyprint').length
- 3$('.prettyprint:not(:eq(0))').length
- 2$('.question-header').length
> - 1$('.question-header:not(:eq(0))').length
- 0对于此页面,在我执行这些操作时,这些数字是正确且可预测的。仔细检查你的代码是否有愚蠢的拼写错误,以及类似的事情,因为它看起来在这里工作正常。
编辑 编辑:这是一个 IE8 错误,大概与它使用的 CSS 选择引擎有关。请参阅 http://jsfiddle.net/5gSxP/2/ 了解 3 种选择方法的概要,第一个在 IE8 中失败,但这个答案中的一个工作正常。
Any non-CSS filtering/selecting should be done through jQuery methods, as it means that jQuery is unable to use CSS to speed up the selector. It tries to use the native CSS support in the browser but if you use
:not
or:eq
etc, it has to use its own parsing system which is slower.The air-quotes "correct" way is this:
As to why the
:not
behaves differently, I'm not sure. I'll keep thinking, and if I get a lightbulb, I'll update this answer :)Edit: It looks like its some browser-specific quirk - I've just done
$('.prettyprint').length
- 3$('.prettyprint:not(:eq(0))').length
- 2$('.question-header').length
- 1$('.question-header:not(:eq(0))').length
- 0For this page, at the time I did them, those numbers were right and predictable. Double check your code for silly typos, and that kind of thing, because it looks to be working OK here.
Edit Edit: It's an IE8 bug, presumably to do with the CSS selection engine it uses. See http://jsfiddle.net/5gSxP/2/ for a rundown of the 3 selection methods, the first one fails in IE8 but the one in this answer works OK.
您可以使用
.not()
使其工作并更具可读性:You can make it work and more readable with
.not()
: