Selecting <p> elements that have not text nodes in jQuery

Question

I have this HTML structure:

<div class="article-body">
<p>
    <a href="http://www.example.com">My Link</a>
Lorem Ipsum Dolor Sit amet.

</p>
<p><a href="http://www.example.com">Link that I must select.</a></p>
</div>​

and I must apply a class to the second link, the one without text nodes. I tried "p:empty a" and "p > a:only-child" but they don't work... There is a way to select it using jQuery?

Answer 1

Can't do with selector, but you can use filter() to perform custom selection:

$('p').filter(function(){
    var $clone = $(this).clone();
    $clone.children().remove();
    return !$clone.text();
}).addClass("red");​

Here, have a fiddle: http://jsfiddle.net/adrianonantua/5daYT/

:)

Update

As per @dfsq suggestion, we can take advantage of end() and make this same logic in one line:

$('p').filter(function(){
    return !$(this).clone().children().remove().end().text();
}).addClass("red");​

Answer 2

Another solution with filter():

$("p").filter(function() {
    return $(this).contents().filter(function() {
        return this.nodeType == 3 && $.trim(this.nodeValue) != "";
    }).length == 0;
}).addClass("myClass")​;

DEMO: http://jsfiddle.net/wyvLC/