如何使用JQuery选择没有特定子元素的元素

Question

是否有一个JQuery选择器来选择不将某个子元素作为直接子元素的所有元素？例如：

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

我想只选择第一个<p>（没有<div>孩子）。 这可能吗？

更多信息：实际上我正在尝试将<div>插入所有没有<p>的{​​{1}}这样的表达式：

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

但这会为第二个<div>添加额外的<p>。

Answer 1

你可以尝试：

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

Answer 2

您可以将:has()^[docs]选择器与not function^[docs]合并来实现此目的：

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

或者，您可以使用:not()^[docs]选择器使用单个选择器：

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

您可以互换使用，但IIRC，第一个更快。

See it in action on jsFiddle

请注意，div是块级元素而p不是。这意味着将div嵌套在p中是无效的HTML。

Answer 3

文本元素中的结构元素看起来非常不洁净，但如果你坚持;）

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

这是一个演示：http://jsfiddle.net/NTpES/3/

Answer 4

试试这个：

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

Answer 5

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