Question

我正在ul上使用.keyup()为多个input创建搜索功能。如果匹配，则.show()为li，而其他匹配则为hide()。

jQuery('.brandsearch').keyup(function(event) {
    var inputValue = jQuery(".brandsearch").val().toLowerCase();
    jQuery(".brands-group li").each(function(event) {
        if(jQuery(this).html().toLowerCase().indexOf(inputValue) == -1) {
            jQuery(this).hide();
        } else {
            jQuery(this).show();
        }
    });
});

如果隐藏层次结构以隐藏整个ul，如果其中的所有li都被隐藏了？

HTML布局：

<input type="text" class="brandsearch">

<ul class="brands-group">
   <li>Adidas</li>
   <li>Nike</li>
</ul>

Answer 1

您可以添加：

if (jQuery('.brands-group li:visible').length == 0) {
   jQuery('.brands-group ul').hide();
}

Answer 2

jQuery('.brandsearch').keyup(function(event) {
    var inputValue = jQuery(".brandsearch").val().toLowerCase();
    jQuery(".brands-group li").each(function(event) {
         var $parent = jQuery(this).closest('ul');
         if(jQuery(this).html().toLowerCase().indexOf(inputValue) == -1)
         {
              jQuery(this).hide();
              if(jQuery('>li:visible', $parent).length == 0) $parent.hide();
         } else {
             jQuery(this).show();
             if($parent.is(':hidden')) $parent.show();
         }
    });
});

jQuery - 如果所有孩子都受影响，则隐藏父级

2 个答案: