jQuery 如何查找匹配多个条件的元素
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/15260296/
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
How to find elements that match multiple conditions
提问by Dmitri
What I need to do is find all a elements on the page that contain "tag" in the href property and the text of the element contains certain word.
我需要做的是在页面上找到所有在 href 属性中包含“标签”的元素,并且元素的文本包含某个单词。
For example
例如
<a href="/my/tag/item2">cars</a>
I know I can get all a elements with tag in the href like this:
我知道我可以在 href 中获取所有带有标签的元素,如下所示:
$("a[href*=tag]");
I can also find all a elements with 'cars' in the text like this:
我还可以在文本中找到所有带有“cars”的元素,如下所示:
$("a:contains('cars')");
But how do I combine these 2 conditions into a single statement that says: Find all a elements that contain 'tag' in the href and contain 'cars' in the text?
但是如何将这 2 个条件组合成一个语句:在 href 中查找包含“tag”并在文本中包含“cars”的所有元素?
回答by iMoses
Have you tried $("a[href*=tag]:contains('cars')");
?
你试过$("a[href*=tag]:contains('cars')");
吗?
You can go on and on forever that way, i.e.
你可以一直这样下去,即
$("a.className.anotherClass[href*=tag][title=test]:contains('cars'):visible");
回答by Beetroot-Beetroot
As the other guys said or, if the two conditions need to be applied separately, with some other code in between for example, then ...
正如其他人所说,或者,如果需要分别应用这两个条件,例如中间有一些其他代码,那么......
var $tags = $("a[href*=tag]");
then later ...
然后后来...
var $carTags = $tags.filter(":contains('cars')");
.filter()
is the generalized method for reducing an existing jQuery selection.
.filter()
是减少现有 jQuery 选择的通用方法。
Like many other jQuery methods .filter()
returns a jQuery object so it will chain :
像许多其他 jQuery 方法一样.filter()
返回一个 jQuery 对象,因此它将链接:
var $foo = $("a[href*=tag]").filter(":contains('cars')").filter(".myClass");
.filter()
is also good for reasons I wasn't about to explain, and I don't need to because @ba?megakapa has just done so very eloquently.
.filter()
出于我不打算解释的原因也很好,我不需要解释,因为@ba?megakapa 刚刚非常雄辩地做到了这一点。
回答by kapa
The other answers show fine and working examples. But there is an interesting quirk here, the distinction between native CSS selectors(that are also supported by the native querySelectorAll()
) and selectors defined by jQuery.
其他答案显示了很好的和有效的例子。但是这里有一个有趣的怪癖,原生 CSS 选择器(也被 native 支持querySelectorAll()
)和jQuery 定义的选择器之间的区别。
Mixing them might not be fortunate, because then the much quicker native engine cannot be used. For example on :has()
the jQuery docs state:
混合它们可能不是幸运的,因为这样就无法使用更快的本地引擎。例如在:has()
jQuery 文档状态:
Because :has() is a jQuery extension and not part of the CSS specification, queries using :has() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.
因为 :has() 是 jQuery 扩展而不是 CSS 规范的一部分,所以使用 :has() 的查询无法利用原生 DOM querySelectorAll() 方法提供的性能提升。
For this reason, you might better off querying with the native method and then filteringby using any jQuery specific selectors:
出于这个原因,您最好使用本机方法进行查询,然后使用任何 jQuery 特定选择器进行过滤:
var $res = $("a[href*=tag]").filter(":contains('cars')");