CODEWITHSUNDEEP
jquery
Roger
Roger

Reputation:

Jquery: Checking to see if div contains text, then action

I'm trying to check in jQuery if a div contains some text, and then add a class if it does.

So I wrote something like this:

    if( $("#field > div.field-item").text().indexOf('someText') = 0) {
        $("#somediv").addClass("thisClass");
    }

I'm not getting this to work.

<div id="field"><div class="field-item">someText</div></div>

<div id="somediv"></div>

Is this incorrect?

Upvotes: 57

Views: 226251

Answers (9)

Ludolfyn
Ludolfyn

Reputation: 2095

Here's a vanilla Javascript solution in 2020:

const fieldItem = document.querySelector('#field .field-item')
if (fieldItem.innerText.includes('someText')) {
  fieldItem.classList.add('red')
  console.log(fieldItem)
}
<div id="field">
  <div class="field-item">someText</div>
</div>

Upvotes: 1

Jean G.T
Jean G.T

Reputation: 1

HTML

<div id="field"><div class="field-item">someText</div></div>
<div id="somediv"></div>

JS

 $( document ).ready(function() {
 if ($('div.field-item:contains("someText")').length > 0) {

$('div#somediv').append("<p>someText was there, so class 'thisClass' was added").addClass("thisClass")
.css("border","2px red");
  }
});

JSfiddle:

https://jsfiddle.net/Loqctuaf/

Upvotes: 0

Mohamad Hamouday
Mohamad Hamouday

Reputation: 2793

This should work and is case insensitive

function has_text(selector, text){
    text = text.toLowerCase();
    return selector.text().toLowerCase().indexOf(text) > -1
}

// for test
var exists = has_text($('#test_id'), 'hello');
console.log(exists)

Upvotes: 1

Shaharia Azam
Shaharia Azam

Reputation: 189

Yes, I now made think for me. And it works fine!!!

if($("div:contains('CONGRATULATIONS')").length)
                        {
                            $('#SignupForm').hide(500);
                        }

Upvotes: 18

Tim
Tim

Reputation: 2464

Why not simply

var item = $('.field-item');
for (var i = 0; i <= item.length; i++) {
       if ($(item[i]).text() == 'someText') {
             $(item[i]).addClass('thisClass');
             //do some other stuff here
          }
     }

Upvotes: 4

Ayman Hourieh
Ayman Hourieh

Reputation: 137436

Your code contains two problems:

  • The equality operator in JavaScript is ==, not =.
  • jQuery.text() joins all text nodes of matched elements into a single string. If you have two successive elements, of which the first contains 'some' and the second contains 'Text', then your code will incorrectly think that there exists an element that contains 'someText'.

I suggest the following instead:

if ($('#field > div.field-item:contains("someText")').length > 0) {
    $("#somediv").addClass("thisClass");
}

Upvotes: 108

Canavar
Canavar

Reputation: 48108

Ayman is right but, you can use it like that as well : 

if( $("#field > div.field-item").text().indexOf('someText') >= 0) {
        $("#somediv").addClass("thisClass");
    }

Upvotes: 5

Tracker1
Tracker1

Reputation: 19344

if( $("#field > div.field-item").text().indexOf('someText') >= 0)

Some browsers will include whitespace, others won't. >= is appropriate here. Otherwise equality is double equals ==

Upvotes: 6

TM.
TM.

Reputation: 111157

You might want to try the contains selector:

if ($("#field > div.field-item:contains('someText')").length) {
    $("#somediv").addClass("thisClass");
}

Also, as other mentioned, you must use == or === rather than =.

Upvotes: 1

Related Questions