通过 class 名称和文本查找元素的选择器

Question

通过 class 名称和文本查找元素的选择器是什么？例如：

<div class="a1">some text</div>
<div class="a1">some other text</div>
<div class="a2">some text</div>

假设我只关心 div 元素 class "a1" 和 "some text".

提前致谢，阿尔瓦罗

Answer 1

您可以像这样使用 :contains() 选择器：

$('.a1:contains("some text")');

Answer 2

您可以将document.querySelectorAll()与参数选择器"[class='a1']"、数组文字和扩展元素一起使用，将NodeList转换为Array，Array.prototype.find()进行检查和匹配.textContent 属性元素到变量或字符串文字。

[...document.querySelectorAll("[class=a1]")]
.find(({textContent}) => textContent === "some text")
.style.color = "green";

<div class="a1">some text</div>
<div class="a1">some other text</div>
<div class="a2">some text</div>

通过 class 名称和文本查找元素的选择器

Selector for finding an element by both class name and text

javascript

jquery

jquery-selectors