jquery - 仅当元素中使用 jQuery 包含某些文本内容时，如何将 css 应用于元素？

Question

http://jsfiddle.net/aWp2g/2/

css

.highlight {
    color: yellow;
}

html

<div>fox</div>
<div>brown</div>

jQuery

if ($('div').text() == 'fox') {
    this.addClass('highlight');
}

我上面的代码不起作用，我希望它向包含特定文本的元素添加一个类，以便它应用突出显示的 css。

Answer 1

this在您的代码中指的是window对象。 .text()方法返回所有选中元素的文本内容，返回值为：foxbrown不等于fox。

您可以使用:contains选择器来选择包含特定文本的元素：

$('div:contains(fox)').addClass('highlight');

完全符合：

$('div').filter(function() {
   return (this.textContent || this.innerText) === 'fox';
}).addClass('highlight');

Answer 2

正如@undefined 提到的

$('div').filter(function() {
   return (this.textContent || this.innerText) === 'fox';
}).addClass('highlight');

应该可以正常工作——但也要记住让你的 jsfiddle 包含 jquery，否则它将无法正常运行。

Answer 3

试试 :empty 选择器。它不会帮助您处理某些文本，而是文本存在。