How to select elements which do not have a specific child element with JQuery
JqueryJquery SelectorsJquery 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.
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")')