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

Solution 1:

You could try:

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

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.

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/