查找没有特定类的直接子元素的元素答案

【问题标题】：Find element that has no direct children with specific class查找没有特定类的直接子元素的元素
【发布时间】：2018-04-06 15:32:01
【问题描述】：

在 HTML 元素页面中，我正在尝试使用 JQuery 查找具有类 .dmc 的父元素，该父元素不包含具有特定类 .dynamic 的直接子元素。

我试过了：

$('.dmc:not(:has(.dynamic))')

但是这会检查所有后代，我只想检查第一级后代。

我认为有一个非常简单的答案，但我想不出来。任何帮助表示赞赏！

【问题讨论】：

标签： javascript jquery html tree-traversal

【解决方案1】：

由于 :has 已经是 jQuery 特定的，您可以使用无根的 >，它似乎支持 jQuery 的 Sizzle 选择器引擎：

$(".dmc:not(:has(> .dynamic))").addClass("green");
// --------------^

$(".dmc:not(:has(&gt; .dynamic))").addClass("green");

.green {
  color: green;
  font-weight: bold;
}

<div class="dmc">1</div>
<div class="dmc">2
  <div class="dynamic">dynamic</div>
</div>
<div class="dmc">3</div>
<div class="dmc">4
  <div class="dynamic">dynamic</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

但是我会有点担心，可能会选择filter：

$(".dmc").filter(function() {
  return $(this).children(".dynamic").length == 0;
}).addClass("green");

$(".dmc").filter(function() {
  return $(this).children(".dynamic").length == 0;
}).addClass("green");

.green {
  color: green;
  font-weight: bold;
}

<div class="dmc">1</div>
<div class="dmc">2
  <div class="dynamic">dynamic</div>
</div>
<div class="dmc">3</div>
<div class="dmc">4
  <div class="dynamic">dynamic</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

【讨论】：