当组的所有 ul>li 不包含过滤器词时隐藏 <h3>

Hide <h3> when all ul>li of group does not contain filter term

本文关键字：过滤器 隐藏 h3 包含 li ul      更新时间：2023-09-26

我创建了一个小脚本，里面有一个嵌套的ul来过滤我的ul。我的脚本的唯一问题是，如果没有任何 li 包含搜索词，我想隐藏嵌套 ul 的标题，但我不确定如何检查每个"组"的 li，而不是每个 li 单独。它的立场是，如果它在与搜索词匹配的组中找到一个 li，它将显示标题，但如果同一组包含不包含搜索词的 li，它将立即转身隐藏标题。我知道我做错了什么，但我对jquery并不熟练，似乎无法想象如何做到这一点。

任何帮助都会很棒。我的代码如下：

.HTML：

<div id="sitemap">
         <h3>Hospital Data Solutions Interactive Site Map</h3>
         <hr/>
    <p id="header"><input type="text" placeholder="Filter Site Map"> - Use this field filter our list of databases: Search by Topic or Topic Subgroup</p>
    <ul id="toplist">
       <li class="group">
           <h3 class="sTitle">Available Beds - <a style="font-size:18px;">Go to Section</a></h3>
           <ul class="sublist">
           <li>General</li>
           <li>ICU</li>
           <li>CCU</li>
           <li>BICU</li>
           <li>SICU</li>
           <li>Other</li>
           <li>Hospice</li>
           <li>Total</li>
           </ul>
       </li>
       <hr/>
       <li class="group">
           <h3 class="sTitle">Discharges - <a style="font-size:18px;">Go to Section</a></h3>
           <ul class="sublist">
           <li>Medicare</li>
           <li>Medicaid</li>
           <li>Other</li>
           <li>Total</li>
           </ul>
       </li>
    </ul>
    </div>

Jquery：

$(function(){
    $('input[type="text"]').keyup(function(){
        var searchText = $(this).val().toLowerCase();
        $('.sublist>li').each(function(){
            var currentLi = $(this).text().toLowerCase();
            if(currentLi.search(searchText) != -1){
            $(this).slideDown();
            $(this).closest('.group').children('.sTitle').show();
            } else { $(this).slideUp(); $(this).closest('.group').children('.sTitle').hide();}
        });     
    });
});

首先，选择.sublist元素而不是li s。

然后使用 .each() 迭代该集合，并使用 .children() 像您当前一样测试每个li，除了使用 .filter() 而不是 .each() 。因此，这将为您提供一个集合。如果集合为空，则没有匹配项。如果没有，那么就有一场比赛。

$('input[type="text"]').keyup(function(){
    var searchText = $(this).val().toLowerCase();
    $('.sublist').each(function(i, sub){
        var matches = $(sub).children().filter(function(i, li) {
            return $(li).text().toLowerCase().search(searchText) != -1;
        });
        if (matches.length) {
            $(sub).slideDown().prev().show();
        } else {
            $(sub).slideUp().prev().hide();
        }
    });     
});

现在，slideDown/Up和show/hide每sublist发生一次，而不是在每个子li上发生。我只是用.prev()回到h3元素。

如果您要隐藏那些与您的搜索不匹配的列表项，无论如何您都会想要单独处理它们，所以我不会放弃这种方法。 因此，您只需要一种方法来检查该术语是否在嵌套列表的搜索中找到。 以下是我可能会做些什么来利用您已经拥有的东西。

捕获搜索词后，遍历每个子列表并将标志设置为 false;这将是我们捕获是否有任何匹配项的地方。 然后遍历该子列表的项目，如果找到匹配项，请将标志设置为 true，根据需要显示或隐藏该项目。 然后，在您检查完所有项目后，根据该标志显示或隐藏标题。 它可能看起来像这样：

$('.sublist').each(function(){
  found = false;
  $(this).children("li").each( function() {
    var currentLi = $(this).text().toLowerCase();
    if(currentLi.search(searchText) != -1){
      $(this).slideDown();
      found = true;
    } else {
      $(this).slideUp();
    }
  });
  if(found) {
    $(this).closest('.group').children('.sTitle').show();
  } else {
    $(this).closest('.group').css("list-style-type", "none");
    $(this).closest('.group').children('.sTitle').hide();
  }  
});

我添加了一个 css 行来显示/隐藏标题的光盘，以避免在其他所有内容消失时将其挂在那里。 希望这有帮助！ 如果您有任何问题，请告诉我。

相关文章：