javascript - 如果所有<li>都有属性显示: none;，如何隐藏()div与ul列表

Question

我的小搜索遇到问题。我有 6 个不同的类别，如下所示。当我尝试查找某些内容时，我希望隐藏没有任何结果的类别的框 - 所有 li 都具有属性 display: none。

<div class="category">
    <h4>Cars</h4>
    <ul class="list">
        <li>Ford</li>
        <li>Opel</li>
        <li>Volkswagen</li>
        <li>Saab</li>
        <li>BMW</li>
    </ul>
</div>

参见GitHub

Answer 1

.filter() 您的 $(".category")，仅返回所有 li 都被隐藏的内容

http://api.jquery.com/filter/
https://api.jquery.com/visible-selector/

$(".category").show().filter(function() {
  return ! $(this).find("li:visible").length;
}).hide();

<小时/>

全功能示例:

var $cat = $('.category');
var $li = $cat.find('li');

$('#box').on("input", function() {

  var inputValue = $.trim(this.value); // Trim values!
  var rgx = new RegExp(inputValue, "i"); // Case insensitive

  // Handle LI elements visibility first
  $li.show().filter(function() {
    return ! rgx.test($(this).text())
  }).hide();

  // Than handle .category wrappers
  $cat.show().filter(function() {
    return ! $(this).find("li:visible").length;
  }).hide();

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="//code.jquery.com/jquery-3.1.0.js"></script>

<div class="container">
  <div class="row">
    <div class="col-12">
      <h3 class="text-center main-header">What do you need?</h3>
      <div class="input-group">
        <input type="text" class="form-control" id="box">
      </div>
    </div>
  </div>
  <div class="row box-wrapper">
    <div class="col-6 col-sm-4 box">
      <div class="category">
        <h4>Cars</h4>
        <ul class="list">
          <li style="">Ford</li>
          <li style="">Opel</li>
          <li style="">Volkswagen</li>
          <li style="">Saab</li>
          <li style="">BMW</li>
        </ul>
      </div>
    </div>
    <div class="col-6 col-sm-4 box">
      <div class="category">
        <h4>Clothes</h4>
        <ul class="list">
          <li style="">Shirt</li>
          <li style="">Blouse</li>
          <li style="">Trousers</li>
          <li style="">Dress</li>
          <li style="">T-shirt</li>
        </ul>
      </div>
    </div>
    <div class="col-6 col-sm-4 box">
      <div class="category">
        <h4>Phones</h4>
        <ul class="list">
          <li style="">Iphone</li>
          <li style="">Samsung</li>
          <li style="">Xaomi</li>
          <li style="">Huawei</li>
          <li style="">Nokia</li>
        </ul>
      </div>
    </div>
    <div class="col-6 col-sm-4 box">
      <div class="category">
        <h4>Software</h4>
        <ul class="list">
          <li style="">Visual Studio Code</li>
          <li style="">Brackets</li>
          <li style="">Atom</li>
          <li style="">Notepad++</li>
          <li style="">Sublime Text</li>
        </ul>
      </div>
    </div>
    <div class="col-6 col-sm-4 box">
      <div class="category">
        <h4>Cameras</h4>
        <ul class="list">
          <li style="">Sony</li>
          <li style="">Canon</li>
          <li style="">Samsung</li>
          <li style="">Panasonic</li>
          <li style="">Nikon</li>
        </ul>
      </div>
    </div>
    <div class="col-6 col-sm-4 box">
      <div class="category">
        <h4>Home</h4>
        <ul class="list">
          <li style="">Tools</li>
          <li style="">Furniture</li>
          <li style="">Equipment</li>
          <li style="">Pets</li>
          <li style="">Other</li>
        </ul>
      </div>
    </div>
  </div>
</div>