列表过滤场景下，如何在所有子<li>隐藏时隐藏父<li>

这是个很常见的列表过滤需求，我来帮你搞定！你已经实现了子<li>的隐藏逻辑，现在只需要在过滤完成后，添加一段检查父元素状态的代码就行。核心思路是：遍历所有包含子列表的父<li>，统计它下面可见子元素的数量，如果没有可见子元素，就隐藏父元素；否则保持显示。

完整修改后的代码 #

$('.filterinput').keyup(function() {
  var searchTerm = $(this).val().trim();
  var $allListItems = $('#list li');

  if (searchTerm.length >= 2) {
    // 构建正则表达式，注意转义反斜杠（\b在字符串里要写成\\b）
    var matchRegex = new RegExp('\\b' + searchTerm, 'i');
    
    // 第一步：处理所有子<li>的显示/隐藏
    $allListItems.each(function() {
      var $item = $(this);
      // 根据是否匹配搜索词切换显示状态
      $item.toggle(matchRegex.test($item.text()));
    });

    // 第二步：检查并更新父<li>的状态
    // 找到所有包含子列表的父<li>（即里面有<ul>的<li>）
    $('#list li:has(ul)').each(function() {
      var $parentLi = $(this);
      // 统计当前父<li>下所有可见的子<li>数量
      var visibleChildrenCount = $parentLi.find('li:visible').length;
      // 如果没有可见子元素，隐藏父<li>；否则显示
      $parentLi.toggle(visibleChildrenCount > 0);
    });
  } else {
    // 当搜索词长度小于2时，显示所有列表项
    $allListItems.show();
  }
});

关键细节说明 #

1. 正则转义：你原来代码里的'\b'要改成'\\b'，因为在JavaScript字符串中，单个\会被当作转义符，所以需要用两个\\来表示正则里的单词边界\b。
2. 父元素定位：用li:has(ul)来精准定位包含子列表的父<li>，这样不会误操作没有子元素的普通列表项。
3. 分层处理逻辑：先统一处理所有子元素的显示状态，再遍历父元素检查，这样不管列表嵌套多少层（比如爷爷级、父级、子级），都能确保父元素的状态正确更新。
4. 性能优化：缓存了$allListItems选择器，避免重复查找DOM元素，提升过滤效率。

对应的HTML结构参考 #

确保你的列表结构是类似这样的（父<li>包含子<ul>）：

<ul id="list">
  <li>
    父项1
    <ul>
      <li>子项1-1</li>
      <li>子项1-2</li>
    </ul>
  </li>
  <li>
    父项2
    <ul>
      <li>子项2-1</li>
      <li>子项2-2</li>
    </ul>
  </li>
</ul>
<input type="text" class="filterinput" placeholder="输入至少2个字符搜索">

这样修改后，当某个父项的所有子项都被隐藏时，父项就会自动隐藏；只要有一个子项可见，父项就会保持显示状态。

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