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