如何用jQuery选择不含.image类的.hi类元素？

嘿，我来帮你搞定这个选择器的问题！首先咱们明确下你的需求：你要选中所有拥有.hi类，并且内部不包含任何.image元素的<div>，对吧？看你给的HTML结构，前两个.hi里都嵌套了.image，只有第三个符合要求。

先说说你现有代码的问题： #

你的代码是这样的：

console.log($('.hi').find('.hue > :not(.image')));

这里有两个明显问题：

1. 语法错误：:not(.image)后面多了一个闭合括号，直接导致选择器无效；
2. 逻辑偏差：你是在.hi里面找.hue的直接子元素且不是.image的元素，但这根本不是你要的——你需要的是筛选.hi元素本身，而不是它内部的子元素。

正确的实现方式： #

有两种简洁的方法可以达到你的需求：

方法1：使用jQuery的:has()和:not()组合选择器

console.log($('.hi:not(:has(.image))'));

这个选择器的逻辑很清晰：

• .hi：先选中所有带.hi类的元素；
• :not(:has(.image))：排除掉那些包含.image后代元素的.hi，剩下的就是你要的目标元素。

方法2：用.filter()方法做精准筛选

如果你觉得选择器读起来有点绕，也可以用更直观的.filter()方法：

console.log($('.hi').filter(function() {
  // 检查当前.hi元素里是否存在.image，不存在就保留
  return !$(this).find('.image').length;
}));

这种方式通过遍历每个.hi元素，判断其内部有没有.image元素——如果find('.image').length为0，说明没有，就把这个.hi保留下来。

两种方法都能正确选中你HTML里的第三个.hi元素，你可以根据自己的习惯选择使用~

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