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

你可以尝试：

$("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 .

Answer 3

structural elements inside text elements look very unclean to me but if you insist ;)

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

here is a demo: http://jsfiddle.net/NTpES/3/

Answer 4

试试这个：

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

Answer 5

这似乎有效： $('p:not("p div")')