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

Posted 2023-05-09

【中文标题】如何找到匹配多个条件的元素

【英文标题】：How to find elements that match multiple conditions

【发布时间】：2013-02-22 00:11:57

【问题描述】：

我需要做的是找到页面上的所有元素 在 href 属性中包含“tag”且元素的文本包含特定单词。

例如

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

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

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

我还可以像这样在文本中找到所有带有“汽车”的元素：

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

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

【参考方案1】：

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

你可以一直这样下去，即

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

【参考方案2】：

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

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 刚刚做得非常雄辩。

【讨论】：

我现在知道的另一个不错的功能。

【参考方案3】：

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

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

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

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

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

【讨论】：

+1 很好的解释。应该在每个 jQuery 新手的阅读清单上。