代码之家  ›  专栏  ›  技术社区  ›  Sharon Hu Bach

如何检查ul容器中的所有元素是否都显示:jquery中是否无

  •  0
  • Sharon Hu Bach  · 技术社区  · 7 年前

    在我的过滤器搜索字段中,我已经将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>
    1 回复  |  直到 7 年前
        1
  •  0
  •   Ercan Peker    7 年前

    检查每一个 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>