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.