Question

我有这个代码并且我创建了一个filter search：，当class =“list-group-item”的所有元素都显示为none时，我想使div.panel不可见。

<div class="panel panel-default ">
   <div class="panel-heading bloque-web">
       <h3 class="panel-title">
          <a data-toggle="collapse" data-parent=".accordion" href="#collapseOne">
              Title
           </a>
       </h3>
   </div>
   <div id="collapseOne" class="panel-collapse collapse">
        <div class="panel-body">
            <ul class="list-group">
                 <li class="list-group-item">Element 1</li>
                 <li class="list-group-item">Element 2</li>
                 <li class="list-group-item">Element 3</li>
             </ul>
        </div>
    </div>
 </div>
<div class="panel panel-default ">
   <div class="panel-heading bloque-web">
       <h3 class="panel-title">
          <a data-toggle="collapse" data-parent=".accordion" href="#collapseTwo">
              Title
           </a>
       </h3>
   </div>
   <div id="collapseOne" class="panel-collapse collapse">
        <div class="panel-body">
            <ul class="list-group">
                 <li class="list-group-item">Element 1</li>
                 <li class="list-group-item">Element 2</li>
                 <li class="list-group-item">Element 3</li>
             </ul>
        </div>
    </div>
 </div>

Java脚本：根据过滤器

淡出特定列表项

$(document).ready(function(){ 
   $("#filter").keyup(function(){
      var filter = $(this).val(), count = 0; 
      $(".list-group-item").each(function(){ 
          if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
              $(this).fadeOut(); 
          } 
          else { 
              $(this).show();
              count++; 
          } 
      }); 
  }); 
});

Answer 1

这是我建议给你的代码（见下文）。这样你就不必像其他答案那样做昂贵的双循环..这是片段http://jsfiddle.net/0jvs9swL/4/

<强> JQuery的：

$(document).ready(function(){ 
   $("#filter").bind('change keyup keydown',function(){
      var filter = $(this).val(), count = 0; 
      $(".list-group-item").each(function(){ 
          if ($(this).text().search(new RegExp(filter, "i")) < 0) {  
              $(this).fadeOut(500,function(){
                  if (allChildrenNotVisible($(this).parent())){
                      $(this).parents('.panel').addClass('hidden');
                  }
              });

          } 
          else { 
              $(this).show();
              $(this).parents('.panel').removeClass('hidden');
              count++; 
          } 
      }); 
   }); 
});


function allChildrenNotVisible(el){
    var result = true;
    el.children().each(function(){
        if($(this).is(':visible')){
            result = false;   
        }
    });
    return result;
}

<强> CSS：

  .panel {
      margin-bottom: 20px;
      background-color: #fff;
      border: 1px solid transparent;
      border-radius: 4px;
     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
     box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
     border-color: #ddd;
  }

  .panel.hidden {
      display:none;
   }

如何在div中查找具有特定css属性的所有元素并将类添加到div

1 个答案: