如何编写jQuery选择器：选中子元素不含指定类的.my-rating元素

嘿，我来帮你搞定这个选择器问题！根据你的需求，要选中class为my-rating的<div>，同时排除那些子元素（包括所有后代）包含指定三个类中任意一个的元素，我们可以用两种方式实现：

方法一：使用:not() + :has()组合选择器 #

这是最简洁的写法，直接通过CSS伪类组合实现需求：

$('div.my-rating:not(:has(.exclude-class1, .exclude-class2, .exclude-class3))')

逻辑解释： #

1. div.my-rating：先筛选出所有class为my-rating的div元素
2. :not(:has(...))：排除掉包含任意一个指定类后代元素的div
   • :has(.exclude-class1, .exclude-class2, .exclude-class3)：匹配那些内部存在这三个类中任意一个元素的父div
   • 加上:not()就会把这些不符合条件的div排除掉，剩下的就是你要的parentA和parentB

如果你的需求是仅排除直接子元素包含指定类的情况（深层后代不算），只需要给选择器加>符号：

$('div.my-rating:not(:has(> .exclude-class1, > .exclude-class2, > .exclude-class3))')

方法二：使用.filter()方法（更直观易调试） #

如果觉得复杂选择器不好理解，或者需要兼容更旧的jQuery版本，可以用filter()方法手动判断：

$('div.my-rating').filter(function() {
  // 检查当前div内部是否存在指定类的元素，不存在则保留
  return !$(this).find('.exclude-class1, .exclude-class2, .exclude-class3').length;
});

逻辑解释： #

• 先获取所有div.my-rating元素
• 遍历每个元素，用find()检查内部是否有指定类的元素
• 如果find()返回的集合长度为0（即没有匹配到），就保留这个元素

为什么你之前的写法不对？ #

你提到“选中的是所有子元素而非父元素”，大概率是把选择器写反了——比如直接写.my-rating .exclude-class1，这会选中my-rating内部的子元素；而“匹配结果过多”可能是没有正确把:not()和:has()结合，比如单独用:not(.exclude-class1)只会排除自身带有该类的元素，而不是排除包含该类子元素的父元素。

示例验证 #

假设你的HTML结构是这样的：

<div class="my-rating" id="parentA">
  <div class="normal-child">我是正常子元素</div>
</div>
<div class="my-rating" id="parentB">
  <div class="another-normal">我也是正常子元素</div>
</div>
<div class="my-rating" id="parentC">
  <div class="exclude-class1">我是要排除的类</div>
</div>
<div class="my-rating" id="parentD">
  <div class="deep-wrapper">
    <div class="exclude-class2">深层的排除类</div>
  </div>
</div>

用上面两种方法，都会只选中parentA和parentB，完美符合你的需求！

内容的提问来源于stack exchange，提问作者Bobert