Jquery: Checking to see if div contains text, then action
JqueryJquery 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: