jquery - 如何找到匹配多个条件的元素

Question

我需要做的是在页面上找到所有在 href 属性中包含“标签”的元素，并且该元素的文本包含某个单词。

例如

<a href="/my/tag/item2">cars</a>

我知道我可以像这样在 href 中获取所有带有标签的元素：

$("a[href*=tag]");

我还可以在文本中找到所有带有“汽车”的元素，如下所示：

$("a:contains('cars')");

但是如何将这两个条件组合成一个语句：查找所有在 href 中包含“tag”并在文本中包含“cars”的元素？

score 22 · Accepted Answer

你试过$("a[href*=tag]:contains('cars')");吗？

你可以一直这样下去，即

$("a.className.anotherClass[href*=tag][title=test]:contains('cars'):visible");

score 5 · Accepted Answer

正如其他人所说，或者，如果需要分别应用这两个条件，例如中间有一些其他代码，那么......

var $tags = $("a[href*=tag]");

然后后来...

var $carTags = $tags.filter(":contains('cars')");

.filter()是减少现有 jQuery 选择的通用方法。

像许多其他 jQuery 方法一样.filter()，它返回一个 jQuery 对象，因此它将链接：

var $foo = $("a[href*=tag]").filter(":contains('cars')").filter(".myClass");

.filter()由于我不打算解释的原因，我也不需要解释，因为@bažmegakapa 刚刚做得非常雄辩。

score 4 · Accepted Answer

其他答案显示了很好的工作示例。但是这里有一个有趣的怪癖，原生 CSS 选择器（也被 native 支持querySelectorAll()）和jQuery 定义的选择器之间的区别。

混合它们可能并不幸运，因为这样就无法使用更快的原生引擎。例如在:has()jQuery 文档状态：

因为 :has() 是 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :has() 的查询不能利用原生 DOM querySelectorAll() 方法提供的性能提升。

出于这个原因，您最好使用本机方法进行查询，然后使用任何 jQuery 特定选择器进行过滤：

var $res = $("a[href*=tag]").filter(":contains('cars')");

3 回答 3