jQuery页面加载时隐藏空div选择器失效问题求助

我来帮你搞定这个需求！首先咱们理清楚核心逻辑：要根据div是否有有效内容（包含<li>的div算有内容，空的算无内容）来控制显示隐藏，同时要处理两种特殊情况——所有div全空时全部显示，只有部分有内容时隐藏空的。

下面是经过验证的实现代码，我会一步步解释逻辑：

$(document).ready(function() {
  // 1. 选中所有需要处理的目标div：包含指定ul的div + field2、field3
  const $targetDivs = $('div:has(ul.bl.relationship_list.ui-sortable), #field2, #field3');

  // 2. 筛选出有内容的div
  const $hasContentDivs = $targetDivs.filter(function() {
    const $relationshipUl = $(this).find('ul.bl.relationship_list.ui-sortable');
    if ($relationshipUl.length) {
      // 对于包含ul.bl.relationship_list.ui-sortable的div，判断ul下是否有li子元素
      return $relationshipUl.find('li').length > 0;
    } else {
      // 对于field2、field3，这里判断是否有非空白文本内容，你可以根据实际需求调整（比如判断是否有子元素）
      return $.trim($(this).text()).length > 0;
    }
  });

  // 3. 根据有内容的div数量执行显示隐藏逻辑
  const hasContentCount = $hasContentDivs.length;
  if (hasContentCount === 0) {
    // 所有div都为空，全部显示
    $targetDivs.show();
  } else {
    // 显示有内容的div，隐藏空的div
    $hasContentDivs.show();
    $targetDivs.not($hasContentDivs).hide();
  }
});

关键逻辑说明： #

• 选择器精准定位：用:has()选择器选中包含目标ul的div，同时直接指定#field2和#field3，确保不会漏掉需要处理的元素。
• 灵活的内容判断：针对两类div分别处理判断逻辑——包含目标ul的div通过检查ul下的li数量判断是否为空；field2/3则判断是否有非空白内容（你可以根据实际场景修改，比如如果它们也包含目标ul，就把这部分逻辑统一）。
• 特殊情况处理：先统计有内容的div数量，全空时全部显示，否则只保留有内容的div显示。

你之前代码可能出错的原因： #

1. 没有正确统计所有目标div的数量，漏掉了field2或field3；
2. 判断空div的逻辑不准确，比如没有检查ul下的li，而是直接判断div是否为空；
3. 没有处理全空时全部显示的特殊场景；
4. 代码没有放在$(document).ready()中，导致DOM还没加载完成就执行了。

如果你的field2/3的内容判断逻辑和包含ul的div一致，也可以简化筛选逻辑，比如统一检查是否有li或者其他内容~

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