jquery - 如何检查ul容器中的所有元素是否显示：在Jquery中无

Question

在我的过滤器搜索字段中，我将 display:none 设置为与输入值字符串不匹配的“a”元素。但是，我被困在如何找出所有元素（“a”）是否隐藏在父 ul 容器中（显示：无）。如果所有子 ("a") 显示：无，则父导航容器也应设置为显示：无。但如果仍有一个或多个可见子元素，则应显示父导航容器。

$(function($) {
  var list = { letters:[] };
  var $ul = $("<ul></ul>").appendTo(".page-content");
   $(".page-content").append("<p id='no_result_found'></p>");
   
  $("nav.link-list a").each(function(itmLetter) {
    var brandTitle = $(this).attr("title");
    itmLetter = brandTitle.trim().substring(0, 1).toUpperCase();
    if (list.letters.indexOf(itmLetter) < 0) {
       list[itmLetter] = [];
        list.letters.push(itmLetter);
      $ul.append(
        $("<li/>", {
          "class": "AddContent",
          "id": itmLetter,
          "data-content": itmLetter
        })
      ); // end of $ul.append()
    } // end of if statement

     // push letters to each nav-list
       list[itmLetter].push($(this));

  }); // end of alphabet list

    list.letters.sort();
    $("article.category-list").empty();
    $.each(list.letters, function(i, letter){
        list[letter].sort(function(a, b) {
            return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
        }); // end of letters.sort()

         var ul = $("<ul/>");
         $.each(list[letter], function(idx, itm){
              ul.append(itm);
          }); // end of .each()
    
         $("article.category-list").append($("<nav/>").addClass("link-list").append($("<h3/>").addClass("alphabet").html(letter)).append(ul));
}); // end of .each()

$("li.AddContent").click(function() {
       var al = $(this).attr("id");
      $("nav.link-list").each(function(){
          var brand =  $(this).find("a").attr("title");
           $(this).css("display", "none").filter(function(){
           return brand.trim().substring(0, 1).toUpperCase() == al;
      }).prependTo("article.category-list").fadeIn(500);
   }); //end of each()
 }); //end of click()

// filter field
   $("input#searchTerm").on("keyup", function(){
         var inputValue = $(this).val().toLowerCase();
         var checkEmpty = [];
 
         $("nav.link-list ul").children("a").each(function(){
             var brand =  $(this).attr("title");

                 if (brand.toLowerCase().indexOf(inputValue) > -1) {
                       checkEmpty.push('1');
                       $(this).fadeIn(800)
                } else {
                      $(this).css("display", "none");
                }
          
     }); // end of .each()
      if ($("nav.link-list ul").children("a").is("visible")) {$("nav.link-list ul").parent().addClass("active");}
if(checkEmpty.length == 0)
        {
         $('#no_result_found').html('Sorry, no matched result is found, please try again.');
        }
        else
        {
          $('#no_result_found').html('');
        }

  }); // end of .on(keyup)
    
    // no result
   
}); //end of script

      

.AddContent:before {
   content: attr(data-content);
}

.page-content h1 {
    display: inline;
    float: left;
}

/**** search field ****/
.page-content__body {
    display: block;
    float: right;
    position: relative;
    top: 24px;
    width: 20%;
}
.search {
  width: 100%;
  position: relative
}
.searchTerm {
  float: left;
  padding: 5px;
  outline: none;
  color: #9DBFAF;
  height: 28px !important;
  border: none !important;
  border-bottom: 1px solid #eaeaea !important;
  padding: 0 4px !important;
}

.searchTerm:focus{
  color: #00B4CC;
}

.searchButton {
  position: absolute;  
  right: 0;
  width: 20px;
  height: 20px;
  border: transparent;
  background: transparent;
  text-align: center;
  color: #8e8e8e;
  cursor: pointer;
  font-size: 16px;
 margin-top: 4px !important;
}

/*Resize the wrap to see the search bar change!*/
.brand-search-wrap{
  width: 100%;
}

/**** Alpabet list ****/
.page-content ul {
   list-style-type: none;
    padding: 0 12px;
    width: 100%;
    display: flex;
    border-bottom: 1px solid #eaeaea;
    align-items: center;
    flex-basis: 100%;
    text-align: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
.page-content ul li {
   cursor: pointer;
   text-align: center;
   display: flex;
   flex-grow: 1;
   padding: 12px 4px;
   transition: 0.4s;
  }
.AddContent:before {
   content: attr(data-content);
   display: block;
   font-size: 20px;
   margin: auto;
   transition: 0.4s;
  }
 .page-content ul li:hover,
 .page-content ul li:focus { 
         background-color: #444;
   }
   .AddContent:hover:before,
   .AddContent:focus:before   
 {
         color: #fff;
   }   

/*** link-list box ****/
.link-list.box {
    padding: 0 0 2px 2px;
 }
.link-list__header {
    text-align: left;
    padding: 0;
    font-size: 1.25rem;
    position: relative;
    top: 8px;
    left: 52px;
    padding: 0;
    min-height: 0 !important;
    line-height: 1;
}
.link-list__background {
    padding-top: 0;
    height: 56px;
    padding: 8px 0 0 16px;
}
.link-list__image {
     width: 12% !important;
     padding: 0;
     position: relative;
     bottom: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Brands</h1>
<div class="brand-search-wrap">
   <div class="search">
      <input type="text" class="searchTerm" id="searchTerm" placeholder="Enter the brand name here">
      <button type="submit" class="searchButton">
        <i class="fa fa-search"></i>
      </button>
   </div>
</div>
  <div class="page-content"></div>
<article class="category-list">
    <nav class="link-list">
      <a href="/brands/abus" title="ABUS">ABUS</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="ACC">ACC</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="BUS">BUS</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="BKUS">BKUS</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="KUS">KUS</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="SUK">SUK</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="YUG">YUG</a>
    </nav>
  </article>

标签： jqueryfilter

Answer 1

检查每一个link-list是否所有子项都被隐藏。

 $('.link-list').each(function(){
          var item=$(this);
          if(item.find('a').get().length==item.find('a:hidden').get().length) {
          item.hide();
          }
          else {
          item.show();
          }
        });
        if(inputValue.length==0){
        $('.link-list').show();
        }

$(function($) {
  var list = { letters:[] };
  var $ul = $("<ul></ul>").appendTo(".page-content");
   $(".page-content").append("<p id='no_result_found'></p>");
   
  $("nav.link-list a").each(function(itmLetter) {
    var brandTitle = $(this).attr("title");
    itmLetter = brandTitle.trim().substring(0, 1).toUpperCase();
    if (list.letters.indexOf(itmLetter) < 0) {
       list[itmLetter] = [];
        list.letters.push(itmLetter);
      $ul.append(
        $("<li/>", {
          "class": "AddContent",
          "id": itmLetter,
          "data-content": itmLetter
        })
      ); // end of $ul.append()
    } // end of if statement

     // push letters to each nav-list
       list[itmLetter].push($(this));

  }); // end of alphabet list

    list.letters.sort();
    $("article.category-list").empty();
    $.each(list.letters, function(i, letter){
        list[letter].sort(function(a, b) {
            return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
        }); // end of letters.sort()

         var ul = $("<ul/>");
         $.each(list[letter], function(idx, itm){
              ul.append(itm);
          }); // end of .each()
    
         $("article.category-list").append($("<nav/>").addClass("link-list").append($("<h3/>").addClass("alphabet").html(letter)).append(ul));
}); // end of .each()

$("li.AddContent").click(function() {
       var al = $(this).attr("id");
      $("nav.link-list").each(function(){
          var brand =  $(this).find("a").attr("title");
           $(this).css("display", "none").filter(function(){
           return brand.trim().substring(0, 1).toUpperCase() == al;
      }).prependTo("article.category-list").fadeIn(500);
   }); //end of each()
 }); //end of click()

// filter field
   $("input#searchTerm").on("keyup", function(){
         var inputValue = $(this).val().toLowerCase();
         var checkEmpty = [];
          
         $("nav.link-list ul").children("a").each(function(){
             var brand =  $(this).attr("title");

                 if (brand.toLowerCase().indexOf(inputValue) > -1) {
                       checkEmpty.push('1');
                       $(this).fadeIn(800)
                } else {
                      $(this).css("display", "none");
                }
          
     }); // end of .each()
      if ($("nav.link-list ul").children("a").is("visible")) {$("nav.link-list ul").parent().addClass("active");}
if(checkEmpty.length == 0)
        {
         $('#no_result_found').html('Sorry, no matched result is found, please try again.');
        }
        else
        {
          $('#no_result_found').html('');
        }
        $('.link-list').each(function(){
          var item=$(this);
          if(item.find('a').get().length==item.find('a:hidden').get().length) {
          item.hide();
          }
          else {
          item.show();
          }
        });
        if(inputValue.length==0){
        $('.link-list').show();
        }
        
        

  }); // end of .on(keyup)
    
    // no result
   
}); //end of script

.AddContent:before {
   content: attr(data-content);
}

.page-content h1 {
    display: inline;
    float: left;
}

/**** search field ****/
.page-content__body {
    display: block;
    float: right;
    position: relative;
    top: 24px;
    width: 20%;
}
.search {
  width: 100%;
  position: relative
}
.searchTerm {
  float: left;
  padding: 5px;
  outline: none;
  color: #9DBFAF;
  height: 28px !important;
  border: none !important;
  border-bottom: 1px solid #eaeaea !important;
  padding: 0 4px !important;
}

.searchTerm:focus{
  color: #00B4CC;
}

.searchButton {
  position: absolute;  
  right: 0;
  width: 20px;
  height: 20px;
  border: transparent;
  background: transparent;
  text-align: center;
  color: #8e8e8e;
  cursor: pointer;
  font-size: 16px;
 margin-top: 4px !important;
}

/*Resize the wrap to see the search bar change!*/
.brand-search-wrap{
  width: 100%;
}

/**** Alpabet list ****/
.page-content ul {
   list-style-type: none;
    padding: 0 12px;
    width: 100%;
    display: flex;
    border-bottom: 1px solid #eaeaea;
    align-items: center;
    flex-basis: 100%;
    text-align: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
.page-content ul li {
   cursor: pointer;
   text-align: center;
   display: flex;
   flex-grow: 1;
   padding: 12px 4px;
   transition: 0.4s;
  }
.AddContent:before {
   content: attr(data-content);
   display: block;
   font-size: 20px;
   margin: auto;
   transition: 0.4s;
  }
 .page-content ul li:hover,
 .page-content ul li:focus { 
         background-color: #444;
   }
   .AddContent:hover:before,
   .AddContent:focus:before   
 {
         color: #fff;
   }   

/*** link-list box ****/
.link-list.box {
    padding: 0 0 2px 2px;
 }
.link-list__header {
    text-align: left;
    padding: 0;
    font-size: 1.25rem;
    position: relative;
    top: 8px;
    left: 52px;
    padding: 0;
    min-height: 0 !important;
    line-height: 1;
}
.link-list__background {
    padding-top: 0;
    height: 56px;
    padding: 8px 0 0 16px;
}
.link-list__image {
     width: 12% !important;
     padding: 0;
     position: relative;
     bottom: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Brands</h1>
<div class="brand-search-wrap">
   <div class="search">
      <input type="text" class="searchTerm" id="searchTerm" placeholder="Enter the brand name here">
      <button type="submit" class="searchButton">
        <i class="fa fa-search"></i>
      </button>
   </div>
</div>
  <div class="page-content"></div>
<article class="category-list">
    <nav class="link-list">
      <a href="/brands/abus" title="ABUS">ABUS</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="ACC">ACC</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="BUS">BUS</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="BKUS">BKUS</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="KUS">KUS</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="SUK">SUK</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="YUG">YUG</a>
    </nav>
  </article>