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

JqueryJquery Selectors

Jquery Problem Overview


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>.

Jquery Solutions


Solution 1 - Jquery

You could try:

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

Solution 2 - Jquery

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.

Solution 3 - Jquery

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/

Solution 4 - Jquery

Try this:

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

Solution 5 - Jquery

This seems to work: $('p:not("p div")')

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionStephanView Question on Stackoverflow
Solution 1 - JqueryjmansView Answer on Stackoverflow
Solution 2 - JqueryPeter OlsonView Answer on Stackoverflow
Solution 3 - JquerymeoView Answer on Stackoverflow
Solution 4 - JqueryShankarSangoliView Answer on Stackoverflow
Solution 5 - JqueryBlazemongerView Answer on Stackoverflow