如何使用jQuery在子div内容为空时为父div添加CSS样式？

需求：当类名为subContent的子div内容为空时，为其对应的父div（类名为parentDivClass）添加padding-bottom: 20px的CSS样式；若subContent包含内容，则不为父div添加该样式。

示例HTML结构：

<div class="parentDivClass">
    <div class="theContent">          
        <div class="subContent"></div>
    </div>
</div>
<div class="parentDivClass">
    <div class="theContent">          
        <div class="subContent">some text</div>
    </div>
</div>
<div class="parentDivClass">
    <div class="theContent">          
        <div class="subContent"></div>
    </div>
</div>

尝试的jQuery代码（未实现预期效果）：

if( $('.subContent').is(':empty') )
{
    $('.parentDivClass').css({'padding-bottom': '20px'});
}

请问这段代码的逻辑哪里出错了？

错误点拆解 #

1. 全局判断逻辑错误：$('.subContent').is(':empty')只判断第一个匹配的subContent元素——如果第一个元素非空，整个条件返回false，所有父元素都加不上样式；如果第一个是空的，会给所有parentDivClass元素加样式，完全没做到“对应父元素”的要求。
2. 父元素选择范围错误：直接用$('.parentDivClass')会选中所有该类元素，无法精准定位到当前空subContent的对应父元素。

正确实现方案 #

方案一：逐个遍历判断 #

$('.subContent').each(function() {
    // 检查当前subContent是否为空
    if ($(this).is(':empty')) {
        // 向上找到最近的parentDivClass父元素并添加样式
        $(this).closest('.parentDivClass').css('padding-bottom', '20px');
    } else {
        // 非空时移除样式，避免之前的样式残留
        $(this).closest('.parentDivClass').css('padding-bottom', '');
    }
});

方案二：用过滤选择器直接定位 #

// 给所有空subContent对应的父元素加样式
$('.subContent:empty').closest('.parentDivClass').css('padding-bottom', '20px');
// 给非空subContent对应的父元素移除样式
$('.subContent:not(:empty)').closest('.parentDivClass').css('padding-bottom', '');

额外注意事项 #

• :empty选择器对空白字符（空格、换行）敏感，如果你的subContent里有看不见的空白，需要用$.trim()清理后再判断：

  if ($.trim($(this).text()) === '') {
      // 执行样式添加逻辑
  }
  

• closest()方法会向上查找最近的匹配父元素，比硬写parent().parent()更健壮，后续HTML结构调整时不用改代码。

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