如何使用jQuery选择器排除包含span标签的元素？

看起来你在做一个元素显示切换的小功能，卡在用.not('span')过滤元素这一步了。别着急，咱们先理清楚问题出在哪，再给出可行的解决方案：

最推荐的实现方式：给元素加专属类标记 #

其实不用纠结过滤span，给你的水元素和种子元素分别加上专属类（比如water-element和seed-element），逻辑会直接清晰很多，也不容易出错：

// 太阳按钮点击：隐藏所有水元素，确保种子元素显示
$('#sun-btn').click(function() {
  $('.water-element').hide();
  $('.seed-element').show(); 
});

// 月亮按钮点击：重新显示所有水元素，种子元素不受影响
$('#moon-btn').click(function() {
  $('.water-element').show();
});

这种方式的好处是，不管你后续添加多少水/种子元素，只要类名正确，事件就能生效，完全不需要管元素内部有没有span。

如果你必须基于span标签过滤 #

要是你没法给元素加类，必须通过span来区分，那得先搞清楚你的元素结构：

• 如果水元素本身就是span标签，那直接操作span就行：

$('#sun-btn').click(function() {
  $('span').hide(); // 隐藏所有水元素（span）
  $('*').not('span').show(); // 显示非span的种子元素
});

$('#moon-btn').click(function() {
  $('span').show(); // 重新显示水元素
});

• 如果水元素是包含span的父容器，那.not('span')肯定没用，因为它只会排除本身是span的元素，不会排除包含span的父元素。这时候要用:has(span)选择器定位水元素：

$('#sun-btn').click(function() {
  $(':has(span)').hide(); // 隐藏所有包含span的水元素
  $(':not(:has(span))').show(); // 显示不包含span的种子元素
});

$('#moon-btn').click(function() {
  $(':has(span)').show(); // 重新显示水元素
});

为什么你的.not('span')没生效？ #

核心问题是选择器逻辑错了：.not('span')的作用是从已选中的元素集合里移除本身是span的元素，而不是移除包含span的元素。如果你的水元素是父容器（比如div）里面套着span，那这个父容器本身不是span，.not('span')根本不会把它排除掉，所以你的过滤就没效果。

另外，如果你的水/种子元素是动态添加的（比如点击按钮新增的），记得要用事件委托绑定点击事件，不然新添加的元素不会响应：

// 动态元素的事件委托写法
$(document).on('click', '#sun-btn', function() {
  $('.water-element').hide();
});

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