jQuery not selector似乎不适用于类

时间:2021-01-29 20:13:17

Ok another dumb jQuery question...

好的另一个愚蠢的jQuery问题......

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...

jQuery中的not选择器给了我一些问题。我试图选择除了具有给定类切换按钮的第一个元素之外的所有元素。但我可以与控制台进行对话......

? $('.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?

什么给,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选择器在应用于类时看起来有不同的行为(貌似) - 如何以最惯用的jQuery方式进行我想要的选择?

:not(:first) does the same thing...

:不是(:第一次)做同样的事情......

UPDATE

UPDATE

Thanks for all responses. This looks to be a bug in the jQuery/IE partnership.

感谢所有回复。这看起来是jQuery / IE合作伙伴关系中的一个错误。

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

......毫无疑问还有更多。我会把它留给疯子来确定哪个是最好的:D

2 个解决方案

#1


2  

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.

任何非CSS过滤/选择都应该通过jQuery方法完成,因为这意味着jQuery无法使用CSS来加速选择器。它尝试在浏览器中使用本机CSS支持但如果你使用:not或:eq等,它必须使用它自己的解析系统,这个速度较慢。

The air-quotes "correct" way is this:

空气引用“正确”的方式是这样的:

$('.toggle-button').filter(':gt(0)').length;

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')。长度 - 3
  • $('.prettyprint:not(:eq(0))').length - 2
  • $('。prettyprint:not(:eq(0))')。length - 2
  • $('.question-header').length - 1
  • $('。question-header')。长度 - 1
  • $('.question-header:not(:eq(0))').length - 0
  • $('。question-header:not(:eq(0))')。length - 0

For 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.

编辑编辑:这是一个IE8错误,可能与它使用的CSS选择引擎有关。请参阅http://jsfiddle.net/5gSxP/2/了解3种选择方法的概要,第一种方法在IE8中失败,但本答案中的一种方法正常。

#2


1  

You can make it work and more readable with .not():

您可以使用.not()使其工作且更具可读性:

$('div').not(':first').length;

#1


2  

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.

任何非CSS过滤/选择都应该通过jQuery方法完成,因为这意味着jQuery无法使用CSS来加速选择器。它尝试在浏览器中使用本机CSS支持但如果你使用:not或:eq等,它必须使用它自己的解析系统,这个速度较慢。

The air-quotes "correct" way is this:

空气引用“正确”的方式是这样的:

$('.toggle-button').filter(':gt(0)').length;

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')。长度 - 3
  • $('.prettyprint:not(:eq(0))').length - 2
  • $('。prettyprint:not(:eq(0))')。length - 2
  • $('.question-header').length - 1
  • $('。question-header')。长度 - 1
  • $('.question-header:not(:eq(0))').length - 0
  • $('。question-header:not(:eq(0))')。length - 0

For 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.

编辑编辑:这是一个IE8错误,可能与它使用的CSS选择引擎有关。请参阅http://jsfiddle.net/5gSxP/2/了解3种选择方法的概要,第一种方法在IE8中失败,但本答案中的一种方法正常。

#2


1  

You can make it work and more readable with .not():

您可以使用.not()使其工作且更具可读性:

$('div').not(':first').length;