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

【问题标题】：How to select elements which do not have a specific child element with JQuery如何使用 JQuery 选择没有特定子元素的元素
【发布时间】：2011-11-07 16:28:18
【问题描述】：

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

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

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

更多信息：实际上我正在尝试将<div> 插入到所有那些没有这样的表达式的<p> 中：

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

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

【问题讨论】：

Granted jQuery 可以将 <div> 填充到 <p> 中，原因很奇怪（我刚刚测试过它，哇——？！），但您可能应该使用更好的示例，例如 @987654332 @ 代表父母，<p> 代表孩子，因为在 <p> 中包含 <div> 是无效的 HTML。
jQuery: Selecting elements that don't have a specific descendant element 的可能重复项
@BoldClock：嗯，我不知道。真正的结构要复杂得多，在<p> 中没有<div>。我试图简化它。
@Stephan 然后更糟...

标签： jquery jquery-selectors

【解决方案1】：

试试这个：

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

【讨论】：

我认为它必须是 :not(ect...) 但你可以直接使用 .not() ;)
存在拼写错误。尝试使用$("p").filter(...); 而不是$("p").fitler(...);。

【解决方案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。

【讨论】：

@BoltClock，我知道，我认为使用该功能更快。不过我可能错了

【解决方案3】：

你可以试试：

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

【讨论】：

谢谢！这一个甚至满足直接孩子的要求！
不错的解决方案。帮助在嵌套列表中选择最低级别的 li：$("li:not(:has(li))")
很遗憾，原生document.querySelector 不支持:has :( .

【解决方案4】：

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

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

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

【讨论】：

但是:has 在子层次结构中某处存在<div> 时选择。我只想检查 direct childs。

【解决方案5】：

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

【讨论】：

不，它没有。首先，:not() 作为选择器不使用引号。其次，每个p不是p div（因为p不是div）。
多么奇怪——当我在独立页面中测试它时它可以工作，而不是在 jsFiddle 中。说实话，在尝试之前我并不认为它会起作用。