选择其子元素不包含 jQuery 中的特定元素的元素答案

【问题标题】：Select elements whose children don't contain specific elements in jQuery选择其子元素不包含 jQuery 中的特定元素的元素
【发布时间】：2011-02-24 16:34:27
【问题描述】：

我想选择页面上所有子元素不包含具有特定类的元素的所有 div。

我可以选择其后代确实包含以下类的元素：

$('div').has('.myClass');

所以我只想要这个的倒数。

【问题讨论】：

该示例将找到该类的所有<div> 元素。如果您想查找所有具有该类的至少一个 child 元素的所有 <div> 元素，那么您的示例将不起作用。
@Pointy。你在想 .hasClass() 吗？ .has() 对我有用
它会，has() 将匹配任何具有与选择器匹配的后代的元素。 api.jquery.com/has-selector
是的对不起@pelms，@InfernalBadger - 你是对的。一定需要更多的咖啡。

标签： javascript jquery

【解决方案1】：

我会使用“.filter()”：

var theDivs = $('div').filter(function() {
  return $(this).find('.myclass').length === 0;
});

【讨论】：

这很好用，谢谢。我希望有一个简单的格式可能使用'not'，但我猜不是:¬)
您可以尝试 $('div:not(*>:has(.myClass))') 这是 Homer 的原始帖子。似乎与 jsfiddle 中的 Pointy 一样。
@InfernalBadger 你能帮我理解那个“* >”在那里做什么吗？这如何限定一个元素？它不只是意味着“任何元素的子元素”吗？
不确定，刚刚尝试了 Homer 的第一篇文章，它似乎有效。

【解决方案2】：

一个简单的$("div:not(:has(.myClass))") 就可以完成这项工作。

它在 jQuery 内部是如何工作的？

1) $("div") - 从文档中获取所有 DIV。

2) :not(:has(.myClass)) - 这是两个嵌套在另一个语句中的语句。现在 jQuery 在上述步骤中对结果 DIV 执行 :has(.myClass) 并获取所有类名为“myClass”的 DIV

3) :not() - 此伪选择器方法将应用于步骤 1 中的所有 DIV，针对第二条语句产生的 DIV，以查找没有“.myClass”的 DIV。这可以通过遍历步骤 1 中的所有 DIV 并比较第二步中的 DIV 来实现。

【讨论】：

【解决方案3】：

$('div:not(:has(*>.myClass))');

【讨论】：

是的，您发布的早期版本有效。这个没有。我在 jquery 1.8 上。

【解决方案4】：

$('div').has(':not(.myClass)');

【讨论】：

这不是问题真正要问的。
我认为这会选择任何具有不是 myClass 的类的元素（即，如果一个元素有两个类，其中一个是 myClass，它仍然会匹配，因为它有一个类那不是 myClass)。
对我来说似乎工作正常 (jsfiddle.net/qAGNm)。 Pointy 的代码也可以。
等一下 - 这将为您提供所有 <div> 元素，这些元素具有 any 没有“myClass”的后代，对吧？
尽管根据 jquery 文档，这就是我所期望的。在 jsfiddle 上进行测试时，它似乎只检查直接子级。奇怪的。您的代码检查所有后代。这取决于我猜@pelms 想要什么？