jQuery selector question

Question

Hi there!

I'm in a bit of a dilemma. I need to select div tags based on whether their children have a certain class. This is a code example of the DOM structure:

<div id="container">

    <div id="one">
         <p>This is item one</p>
         <p class="special">This is a description</p>
    </div>

    <div id="two">
         <p>This is item one</p>
         <p>This is a description</p>
    </div>

    <div id="three">
         <p>This is item one</p>
         <p class="special">This is a description</p>
    </div>

</div>

So, what I want to select is a div tag that doesn't have a paragraph with a class of "special", and in the example above, that would be second div tag (#two).

Any ideas?

Answer 1

You can use the :not and :has selectors:

$('div:not(:has(p.special))')

Answer 2

Try this:

$("div").filter(function() {
    return $(this).children("p.special").length == 0;
})