如果所有<li>都有属性display：none，那么hide（）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>

Answer 2

如果您想要隐藏div，以防所有li都具有display : none属性，您可以使用以下代码：

var li = $(".list li").css({'display' : 'none'})
if(li){
   $(".category").css({'visibility' : 'hidden'})
} else {
   $(".category").css({'display' : 'none'})
}

希望有所帮助：）