当所有子li含.hide类时隐藏.woof_container父容器的实现方法

这是个很常见的动态UI需求，根据你的场景，我们需要检查每个.woof_container内的所有.woof_term元素是否都带有.hide类，若是则隐藏整个容器。下面给你两种实现方案：

方案1：原生JavaScript（无依赖） #

这种方法不需要引入任何外部库，直接用浏览器原生API就能实现：

// 等待DOM完全加载后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 获取页面中所有的目标容器
  const containers = document.querySelectorAll('.woof_container');
  
  containers.forEach(container => {
    // 提取容器内所有的选项元素
    const termItems = container.querySelectorAll('.woof_term');
    // 检查是否所有选项都带有.hide类
    const allItemsHidden = Array.from(termItems).every(item => item.classList.contains('hide'));
    
    if (allItemsHidden) {
      // 直接隐藏容器，也可以用添加CSS类的方式（更符合样式分离原则）
      container.style.display = 'none';
      // 替代方案：container.classList.add('visually-hidden');
      // 然后在CSS中定义：.visually-hidden { display: none; }
    }
  });
});

方案2：jQuery（适合已引入jQuery的项目） #

如果你的项目已经使用了jQuery，代码会更简洁直观：

$(document).ready(function() {
  $('.woof_container').each(function() {
    // 统计容器内不带.hide类的选项数量
    const visibleTermCount = $(this).find('.woof_term:not(.hide)').length;
    // 如果没有可见选项，就隐藏当前容器
    if (visibleTermCount === 0) {
      $(this).hide();
    }
  });
});

动态场景补充（如AJAX加载筛选结果） #

如果这些筛选选项是通过AJAX动态更新的（比如WooCommerce筛选插件的异步刷新），需要把检查逻辑放到AJAX完成的回调里，确保新加载的元素能被正确处理：

// 以WooCommerce WOOF插件的AJAX完成事件为例
$(document).on('woof_ajax_done', function() {
  $('.woof_container').each(function() {
    const visibleTermCount = $(this).find('.woof_term:not(.hide)').length;
    if (visibleTermCount === 0) {
      $(this).hide();
    } else {
      $(this).show(); // 确保之前隐藏的容器在出现可见选项时重新显示
    }
  });
});

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