选择包含特定文本的 div 类 [重复]

Question

我正在尝试选择具有特定文本的 div 类。

示例：<div class="foo">Foo39</div>

所以，如果 foo 类包含“foo39”文本，那么它应该是红色的，如果它包含其他文本，那么它应该是绿色的！

我尝试使用 CSS，但没有成功！

Answer 1

JQuery 提供了:contains 选择器，使用方式如下：

$('.foo:contains(Foo39)').css('background-color', 'red');
$('.foo:not(:contains(Foo39))').css('background-color', 'green');

Answer 2

并且使用纯 javascript，因为您没有提到您使用的是 jQuery....但适用于本机 querySelctor/All

使用 querySelctorAll 可能比 jquery 的 .contains 性能更高

<div class="foo">Foo37</div>
<div class="foo">Foo38</div>
<div class="foo">Foo39</div>
<div class="foo">Foo40</div>

<script>
var find = "Foo40";
var needle;
var haystack = document.querySelectorAll(".foo");
var i;

for (i = 0; i < haystack.length; i++) {
    if(haystack[i].innerHTML == find){
         console.log("found");
         haystack[i].style.background = "red";
    }else{
         haystack[i].style.background = "green";
    }
}
</script>

使用 getElementsByClassName 可能比 querySelectorAll 性能更高

<div class="foo">Foo37</div>
<div class="foo">Foo38</div>
<div class="foo">Foo39</div>
<div class="foo">Foo40</div>

<script>
var find = "Foo40";
var needle;
var haystack = document.getElementsByClassName("foo");
var i;

for (i = 0; i < haystack.length; i++) {
    if(haystack[i].innerHTML == find){
         console.log("found");
         haystack[i].style.background = "red";
    }else{
         haystack[i].style.background = "green";
    }
}
</script>