jQuery 选择属性中不包含字符串的元素

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11017170/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 10:05:19  来源:igfitidea点击:

select element that does not contain a string within an attribute

jqueryjquery-selectors

提问by Pierpaolo

let's say that I have some

假设我有一些

<TR style = "background-color : red ;">

and some

还有一些

<TR>

(to be noted that the spaces next to the colon and to the semicolon are intentional, because the page I am dealing with is written in that way)

(要注意,冒号和分号旁边的空格是故意的,因为我正在处理的页面是这样写的)

now, this:

现在,这个:

$('.detailtable tr:not([style~="darkgray"])')

works perfectly. But hereit says:

完美地工作。但这里说:

[name!="value"] cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").not('[name="value"]') instead

[name!="value"] 无法利用原生 DOM querySelectorAll() 方法提供的性能提升。为了在现代浏览器中获得更好的性能,请改用 $("your-pure-css-selector").not('[name="value"]')

so I was wondering: is my expression the best one or something like:

所以我想知道:我的表达是最好的还是类似的:

$('.detailtable tr').not('[style~="darkgray"]') // this doesn't work!

is better performing? And what is the correct way of writing this last expression?

性能更好吗?最后一个表达式的正确书写方式是什么?

Thanks in advance

提前致谢

回答by Joseph Silber

If you really want to "select element that does not contain a string within an attribute", you should use *=instead of ~=, like so:

如果你真的想“选择一个属性中不包含字符串的元素”,你应该使用*=而不是~=,像这样:

$('.detailtable tr').not('[style*="darkgray"]');

Here's the fiddle.

这是小提琴



And no, using .notis probably not faster. querySelectorAllshould be able to parse that selector as is.

不,使用.not可能不会更快。querySelectorAll应该能够按原样解析该选择器。

See this fiddle.

看到这个小提琴



Edit:If you care about IE8 that much, then using the .notmethod instead of the :notselector will give you a small performance boost. The reason for this is very simple: IE8 does support attribute selectors, but not the negation selector.

编辑:如果你非常关心 IE8,那么使用.not方法而不是:not选择器会给你一个小的性能提升。原因很简单:IE8 确实支持属性选择器,但不支持否定选择器。

回答by cereallarceny

I'd suggest you take a look at this.

我建议你看看这个。

Interestingly enough, pseudo selectors (like ":not") tend to actually be slower than using a function next to the initial selector. In fact... they're apparently "twice as slow".

有趣的是,伪选择器(如“:not”)实际上比在初始选择器旁边使用函数要慢。事实上......他们显然“慢了两倍”。

I quote:

我引用:

  1. $("#id p");
  2. $("#id").find("p");
  1. $("#id p");
  2. $("#id").find("p");

Would it surprise you to learn that the second way can be more than twice as fast as the first? Knowing which selectors outperform others (and why) is a pretty key building block in making sure your code runs well and doesn't frustrate your users waiting for things to happen.

得知第二种方式的速度可能是第一种方式的两倍多,您是否会感到惊讶?了解哪些选择器优于其他选择器(以及为什么)是确保您的代码运行良好并且不会让您的用户在等待事情发生时感到沮丧的一个非常关键的构建块。

I'd go with .notmy friend!

我会和.not我的朋友一起去!

回答by Sujay

From the W3C Recommendation, what you currently use should work perfectly fine even with document.querySelectorAll().

根据W3C 建议,您当前使用的内容即使使用document.querySelectorAll().

Maybe you can test if it works as expected.

也许您可以测试它是否按预期工作。