jquery - jQuery 如果“this”包含

Question

我正在尝试将包含特定文本字符串的任何元素更改为红色。在我的示例中，我可以让子元素变为蓝色，但是我编写“替换我”行的方式有些不正确；不会发生红色变化。我注意到“包含”方法通常写成，:contains但我无法用$(this).

$('#main-content-panel .entry').each(function() {
       $(this).css('color', 'blue');      
});         

$('#main-content-panel .entry').each(function() {
   if($(this).contains("Replace Me").length > 0) {
        $(this).css('color', 'red'); 
    }      
});

小提琴：http: //jsfiddle.net/zatHH/

Answer 1

:contains是一个选择器。要检查选择器是否适用于给定变量，您可以使用is：

if($(this).is(':contains("Replace Me")')) 

然而，在这种情况下，Vega 的解决方案更清洁。

Answer 2

我认为.containsjQuery 中没有函数。有一个.contains函数，但该函数用于查看 DOM 元素是否是另一个 DOM 元素的后代。请参阅 .contains 的文档。 （归功于@beezir）

我认为您正在寻找:contains选择器。请参阅下面的更多细节，

$('#main-content-panel .entry:contains("Replace Me")').css('color', 'red');

http://jsfiddle.net/zatHH/1/

Answer 3

您可以使用它match来查找特定元素内的文本

$('#main-content-panel .entry').each(function() {
    $(this).css('color', 'blue');      
});			

$('#main-content-panel .entry').each(function() {
    if($(this).text().match('Replace Me')) {
        $(this).css('color', 'red'); 
    }      
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-content-panel">
    <div class="entry">ABC</div>
    <div class="entry">ABC Replace Me</div>
    <div class="entry">ABC</div>
    <div class="entry">ABC Replace Me</div>
</div>

Answer 4

我认为我们应该将文本转换为小写。最好用小写和大写检查。

$('#main-content-panel .entry').each(function() {
    var ourText = $(this).text().toLowerCase(); // convert text to Lowercase
    if(ourText.match('replace me')) {
        $(this).css('color', 'red'); 
    }      
});