How to select elements which do not have a specific child element with JQuery

Question

Is there a JQuery selector to select all elements which do not have certain child element as a direct child? For example:

<p>     text in paragraph </p> <p>     <div>text in div</div> </p> 

I want to select only <p>s like the first one (without a <div> child). Is this possible?

Further information: Actually I'm trying to insert a <div> into all those <p> that do not have one by an expression like this:

$('p').wrapInner('<div />') 

But this would add an additional <div> to the second <p>.

Answer 1

You could try:

$("p:not(:has(>div))") 

Answer 2

You can combine the :has()^[docs] selector with the not function^[docs] to acheive this:

$("p").not(":has(div)").wrapInner("<div/>"); 

Alternatively, you can use a single selector by using the :not()^[docs] selector:

$("p:not(:has(div))").wrapInner("<div/>"); 

You can use either interchangeably, but IIRC, the first is faster.

See it in action on jsFiddle.

Note that div is a block-level element and p is not. That means it is not valid HTML to have a div nested in a p.