Javascript 隐藏<；h3>；当所有ul>；组的li不包含筛选项

我已经创建了一个小脚本，它用嵌套的ul过滤我的ul。我的脚本的唯一问题是，如果没有一个li包含搜索词，我想隐藏嵌套ul的标题，但我不确定如何检查每个“组”的li，而不是每个li。按照目前的方式，如果在组中找到与搜索词匹配的li，它将显示标题，但如果同一组包含不包含搜索词的li，它将立即返回并隐藏标题。我知道我做错了什么，但我在jquery方面没有那么熟练，似乎无法想象如何进行

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

HTML:

---

首先，选择

.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();
        }
    });     
});

---

现在，

向下/向上滑动

和

显示/隐藏

将在每个

子列表

上发生一次，而不是在每个子

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行来显示/隐藏标题的光盘，以避免在其他内容消失时将其挂在那里。希望这有帮助！如果您有任何问题，请告诉我。

Dang这很好用。谢谢你帮助我想象/克服这里应该发生的事情的心理障碍。我很感激。把你标记为正确的。

$('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();
        }
    });     
});

$('.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();
  }  
});