CODEWITHSUNDEEP
jquerythiscontains
Chris
Chris

Reputation: 483

jQuery if "this" contains

I'm trying to change any elements containing a particular text string to a red color. In my example I can get the child elements to become blue, but there's something about the way I've written the 'Replace Me' line that is incorrect; the red color change doesn't happen. I note that the "contains" method is usually written as :contains but I couldn't get that to validate with $(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'); 
    }      
});

Fiddle: http://jsfiddle.net/zatHH/

Upvotes: 28

Views: 106591

Answers (4)

Hary
Hary

Reputation: 5818

you can use match to find the text inside the particular element

$('#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>

Upvotes: 15

KoemsieLy
KoemsieLy

Reputation: 722

I think we should convert our text to lower case. It is better to check with lowercase and uppercase.

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

Upvotes: 7

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

I don't think there is a .contains function in jQuery. There is a .contains function but that function is used to see if a DOM element is a descendant of another DOM element. See documentation for .contains. (Credits to @beezir)

I think you are looking for :contains selector. See below for more details,

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

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

Upvotes: 18

jkozera
jkozera

Reputation: 3066

:contains is a selector. To check if a selector applies to given variable, you can use is:

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

However Vega's solution is cleaner in this case.

Upvotes: 87

Related Questions