Question

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

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

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

我尝试过使用CSS但没有运气！

Answer 1

JQuery提供了item选择器，如下所示：

:contains

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>

选择包含特定文本的div类

2 个答案: