jQuery检测su-spoiler-content为空时隐藏父级代码失效如何解决？

失效原因 #

• :empty选择器匹配规则严格：CSS的:empty选择器仅会匹配完全没有子节点的元素，只要元素内部存在换行、空格、制表符等空白字符，就不会被判定为空。绝大多数场景下手风琴内容容器即使没有实际业务内容，也会保留源码里的缩进、换行空白字符，所以无法匹配到目标元素。
• DOM未加载完成就执行代码：如果脚本放在页面头部位置执行，此时手风琴相关的DOM元素还没有渲染完成，jQuery找不到对应元素，代码自然不会生效。
• 父级元素定位错误：.su-spoiler-content的直接父元素如果只是内容区域的容器，而不是包含标题的整个手风琴项容器，调用parent().hide()只会隐藏内容区域，标题还是会显示，甚至完全没有效果。
• 脚本执行顺序冲突：如果代码执行后，还有其他初始化手风琴的脚本后续执行，可能会覆盖你设置的hide()状态，把元素重新显示出来。

修复代码 #

jQuery(document).ready(function($) {
  // 遍历所有手风琴内容区域，兼容仅含空白字符的空内容场景
  $('.su-spoiler-content').each(function() {
    if ($.trim($(this).text()) === '') {
      // 替换.su-spoiler为你实际的完整手风琴项（包含标题）的类名即可
      $(this).closest('.su-spoiler').hide();
    }
  });
});

如果你的手风琴内容是动态请求接口后渲染的，需要把上述代码放到接口请求完成、DOM渲染结束的回调函数里执行。

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