如何使用jQuery在div内span为空时设置该div为display:none？

嘿，这个需求其实很容易实现，用jQuery的选择器和过滤方法就能搞定。咱们分两种场景来写代码，覆盖不同的情况：

基础场景：span完全为空（无任何字符，包括空格） #

如果你的span是完全空的（连空格、换行都没有），可以直接用jQuery的组合选择器快速实现：

HTML示例 #

<div class="item-div">
  <span></span> <!-- 这个span为空，对应div要隐藏 -->
</div>
<div class="item-div">
  <span>我是有内容的span</span> <!-- 这个div保持显示 -->
</div>

jQuery代码 #

// 选中所有包含空span的div，设置为隐藏
$('div:has(span:empty)').hide();

这里的div:has(span:empty)是核心选择器：

• :has() 会筛选出包含指定子元素的父元素
• :empty 会匹配没有任何子节点（包括文本节点）的元素
  最后用.hide()方法等价于设置display:none，写法更简洁。

健壮场景：span可能包含空白字符（空格、换行等） #

实际开发中，有时候span里可能会有空格、换行这类看不见的空白字符，这时候:empty就不生效了。咱们可以用.filter()方法结合$.trim()来处理：

jQuery代码 #

// 精准筛选出内部span文本（去除空白后）为空的div
$('div.item-div').filter(function() {
  // 取出当前div下span的文本，去除首尾空白后判断是否为空
  return $.trim($(this).find('span').text()) === '';
}).hide();

这个方法更可靠：

• 用.filter()遍历每个目标div，自定义判断逻辑
• $.trim()会移除文本首尾的所有空白字符，确保真正无内容的span被识别
• 加上.item-div类选择器，避免影响页面上其他无关的div，更精准

额外小提示 #

• 如果你的div没有统一类名，也可以用其他属性选择器（比如div[data-type="content"]）来定位，尽量不要直接用$('div')，避免误操作其他元素
• .hide()是jQuery封装的方法，等价于.css('display', 'none')，如果需要后续恢复显示，用.show()就可以

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