如何用jQuery查找无直接子元素.dynamic的.dmc父元素

你说的这个问题很常见，默认的:has(.dynamic)会匹配所有后代中包含.dynamic的元素，所以才会不符合你的需求。想要只校验第一级直接子元素，只需要给:has()里的选择器加上直接子元素符号 > 就行！

正确的jQuery选择器 #

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

各部分作用拆解： #

• .dmc：先筛选出所有带有.dmc类的元素
• :not(:has(> .dynamic))：排除掉那些直接子元素中包含.dynamic类的元素。这里的 > 是核心，它把匹配范围严格限定在目标元素的第一级子元素，不会去检查更深层的后代。

举个实际HTML结构的例子： #

<!-- 会被选中：直接子元素没有.dynamic -->
<div class="dmc">
  <div class="content">...</div>
</div>

<!-- 不会被选中：存在直接子元素带.dynamic -->
<div class="dmc">
  <div class="dynamic">...</div>
  <div class="content">...</div>
</div>

<!-- 会被选中：.dynamic是孙子元素，不是直接子元素 -->
<div class="dmc">
  <div class="content">
    <div class="dynamic">...</div>
  </div>
</div>

这样就能精准筛选出符合你要求的.dmc元素啦！

内容的提问来源于stack exchange，提问作者El-Jus