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

Jquery

Jquery Problem Overview


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?

Jquery Solutions


Solution 1 - Jquery

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");
}

Solution 2 - Jquery

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

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

Solution 3 - Jquery

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 ==

Solution 4 - Jquery

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

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

Solution 5 - Jquery

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
          }
     }

Solution 6 - Jquery

Here's a vanilla Javascript solution in 2020:

const fieldItem = document.querySelector('#field .field-item')
fieldItem.innerText === 'someText' ? fieldItem.classList.add('red') : '';

Solution 7 - Jquery

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 =.

Solution 8 - Jquery

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)

Solution 9 - Jquery

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/

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRogerView Question on Stackoverflow
Solution 1 - JqueryAyman HouriehView Answer on Stackoverflow
Solution 2 - JqueryShaharia AzamView Answer on Stackoverflow
Solution 3 - JqueryTracker1View Answer on Stackoverflow
Solution 4 - JqueryCanavarView Answer on Stackoverflow
Solution 5 - JqueryTimView Answer on Stackoverflow
Solution 6 - JqueryLudolfynView Answer on Stackoverflow
Solution 7 - JqueryTM.View Answer on Stackoverflow
Solution 8 - JqueryMohamad HamoudayView Answer on Stackoverflow
Solution 9 - JqueryJean G.TView Answer on Stackoverflow