如何遍历div并在所有子元素为display:none时为对应段落添加类

核心逻辑 #

遍历每个网格容器，筛选出所有子元素中display不为none的节点，只要筛选结果长度为0，就说明该网格下没有可展示内容，直接隐藏对应标题或者给父容器加隐藏类即可。

完整实现代码 #

// 遍历每一个模板标题对应的网格容器
$('.js-template-heading').each(function() {
  const $heading = $(this);
  const $grid = $heading.next('.c-templates-grid');
  // 筛选网格中所有没有设置display:none的子模板项
  const $visibleItems = $grid.children('.js-template').filter(function() {
    return $(this).css('display') !== 'none';
  });
  // 如果可见项数量为0，控制对应标题显隐
  if ($visibleItems.length === 0) {
    // 方案1：直接隐藏标题
    $heading.hide();
    // 方案2：给父容器加自定义类，可通过CSS控制更多联动样式
    // $heading.closest('.c-templates-wrapper').addClass('is-empty');
  }
});

补充说明 #

• 如果子模板的显隐状态会动态变更，把上述逻辑封装成独立函数，在状态变更后重新调用即可同步更新标题显示状态
• 如果你是通过添加自定义类的方式给子模板设置display:none，可以把筛选逻辑改成return !$(this).hasClass('自定义隐藏类名')，判断效率更高

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