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

71

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

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

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

进一步的信息：实际上，我正在尝试通过这样的表达式将a<div>插入所有<p>不包含a的那些中：

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

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

jquery jquery-selectors

— 史蒂芬
source

3

授予jQuery的人可能出于某种奇怪的原因（我刚刚对其进行了测试，等等？）将a<div>塞入了a <p>，但是您可能应该使用一个更好的示例，例如<div>针对父母和<p>孩子，因为它不是有效的HTML，<div>内部没有一个<p>。

— BoltClock

1

jQuery的

— Felix Kling

@BoldClock：恩，我不知道。实际的结构要复杂得多，并且<div>内部没有任何结构<p>。我试图简化它。

— 斯蒂芬，

@Stephan然后更糟……

— meo

135

您可以尝试：

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

— 杰曼斯
source

谢谢！这个甚至可以满足直子的要求！

— 斯蒂芬，

5

不错的解决方案。帮助选择嵌套列表中最低级别的li：$（“ li：not（：has（li））”）

— marlar 2012年

3

不幸的是，:has不是由本地支持document.querySelector。:(

— trusktr

14

您可以将:has()^[docs]选择器与^[docs]not函数结合使用以实现此目的：

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

另外，您可以通过使用:not()^[docs]选择器来使用单个选择器：

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

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

可以在jsFiddle上看到它。

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

— 彼得·奥尔森
source

@BoltClock，我知道，我认为使用该功能的速度更快。我可能是错的

— 彼得·奥尔森

1

文本元素中的结构元素对我来说看起来很不干净，但是如果您坚持;）

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

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

— o
source

但是:has选择<div>子层次结构中何时存在某个位置。我只想检查直子。

— 斯蒂芬，

0

尝试这个：

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

— 香卡·桑格里
source

我认为它必须是：not（ect ...），但您可以直接使用.not（）;）

— meo

1

有拼写错误。尝试使用$("p").filter(...);代替$("p").fitler(...);。

— Hitesh

-2

这似乎可行： $('p:not("p div")')

— 开拓者
source

不，不是。首先，:not()因为选择器不使用引号。其次，每个 p都不是p div（因为p不是div）。

— BoltClock

多么奇怪-当我在独立页面中但不在jsFiddle中对其进行测试时，它可以工作。说实话，我认为在尝试之前它不会起作用。

— Blazemonger，2011年