选择包含特定文本的div类

Question

我想选择一个包含特定文本的div类。

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

如果foo类包含“foo39”文本，则应为红色，如果它包含其他文本，则应为绿色！

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

- Yuan Arkiden

---

已尝试的内容。 - Rachel Gallen

@Pangloss：我认为这不是重复的。引用的问题询问如何检查内部HTML是否包含特定字符串。而这个问题则询问关于内部HTML的相等性检查。 - Kwarrtz

@Kwarrtz，你说得对，我没有看到jQuery标签，问题中也没有提到它，很高兴你解决了这个问题，毕竟这是一个JS问题。 - Stickers

Answer 1

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

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

- Kwarrtz

---

好的！它起作用了 :) 但是它将整个页面都变成了那个类的绿色！ - Yuan Arkiden

解决了！非常感谢您，先生！ - Yuan Arkiden

最后一个问题！我们如何在文档准备就绪时触发它。Onload还是文档准备就绪？ - Yuan Arkiden

$('document').ready(function() { ... }) - Kwarrtz

Answer 2

既然您没有提到使用jQuery，您可以使用纯JavaScript……但是可以使用原生的querySelector/All。

使用querySelectorAll 可能比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>

- user2276553

---

这个解决方案的性能如何？ - Kwarrtz

如果你指的是有效载荷大小的话，如果不需要jQuery框架，那么这可能会有更轻量级的足迹。根据我最近阅读的内容，使用getElementsByTagName或getElementsByClassName的纯JavaScript方法实际上比新的本地querySelectorAll和jQuery的.contains和.find方法更快。 - user2276553

是的，占用空间肯定会更小，但对于大型文档而言，简单的列表迭代可能会非常痛苦。我还相信 querySelectorAll 函数的实现在不同浏览器之间会有所不同，但我不认为在任何情况下它都会非常慢。 - Kwarrtz

你不会选择整个文档。你首先会在querySelectorAll("#myParentElemID .foo")中找到起始父元素；querySelectorAll支持现代浏览器已有一段时间，并由IE8首次引入。就像我提到的，getElementsByClassName实际上是一个更好的性能查询。因此根据问题和有限信息，本地js在运行时性能和数据包下载大小方面获胜。不幸的是，JSPERF.com目前正在进行维护。 - user2276553

这是querySelector的浏览器支持表 http://caniuse.com/#feat=queryselector @Kwarrtz - user2276553

最后，我添加了使用getElementsByClassName作为第二个示例，当然，如果您打开jquery的源代码，您可能会看到它在选择器/过滤器方法中广泛使用此功能和其他本地功能...原生方式通常更高效。 - user2276553