jQuery, find if element has any text

Question

I am dealing with some generated spans and I would like to find which one of them does not contain any text.

The markup is:

<span id="layer6">     <span class="drag col">  Some text</span>     <span class="drag col">  More text</span>     <span class="drag col">  </span>     <span class="drag col">  I also have text</span> </span> 

I can get get the ones that have "some text" with this code but I can not get the empty ones:

if ($('#layer6 > span.col:contains("some text")').length > 0) {     alert ("I have text"); } 

How to get the empty ones? I am thinking in using .length to do it but I did not manage.

Answer 1

$("span.col").each(function(){     if (!$(this).text().trim().length) {         $(this).addClass("foo");     } }); 

http://jsfiddle.net/cfgr9/1/

Obviously instead of adding a class you can do as you like, return the object etc

UPDATE: Removed strange hidden character after final semicolon that caused js error.

Answer 2

Use filter to filter those elements that don’t have textual contents:

$('#layer6 > span.col').filter(function(){     return $(this).text().trim() != ""; }).length