How find all elements with a specific css property in a div and add a class to div

Question

I have this code and I make a filter search:, I want to make invisible the div.panel when all elements with the class="list-group-item" are display:none.

<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 script: Fades out specific list items based on filter

$(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++; 
          } 
      }); 
  }); 
});

Did you check my answer?? Do you have any function like that? Or your code is completely unmanageable without functions? — Michail Michailidis, Oct 22 '14 at 14:43

Michail Michailidis · Accepted Answer · 2014-10-22T19:06:37.757

0

This is what I would suggest given your code (see below). That way you don't have to do costly double loops as the other answer suggests.. Here is the snippet 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;
   }

edited Oct 22 '14 at 19:06

answered Oct 21 '14 at 20:19

Michail Michailidis

10,050
6
44
85

Thank you Michail, but I can apply the code, dont working :/, I dont know what I do wrong, if you can help me, this make me crazy :P – Bonny Valencia Oct 22 '14 at 17:31
@BonnyValencia - Update your question with the javascript that removes the element if you have access to this code and possibly I could give specific code guidelines – Michail Michailidis Oct 22 '14 at 17:32
I edited your code - use correct indentation so everyone can understand ;). Check my update - I didn't run the code so it could probably have some issues - but that's the approach that I would take. – Michail Michailidis Oct 22 '14 at 18:00
I make a test, but still dont work check it out: [link](http://jsfiddle.net/0jvs9swL/1/) – Bonny Valencia Oct 22 '14 at 18:43
Good I changed it a bit - because I thought the ul would be empty. Now it works almost but something is wrong with the order of things - you have to type something after there is nothing to make them disappear.. your state is inconsistent and I will look at it later.. http://jsfiddle.net/0jvs9swL/2/ – Michail Michailidis Oct 22 '14 at 18:54
@BonnyValencia I made it work correctly ;) - if that answers your question please accept it! Thanks :) – Michail Michailidis Oct 22 '14 at 19:01
You are very welcome :) - Keep an eye on the function I pass in fadeOut (this is only run when the animation is completed) if you put the my code after `fadeOut()` it won't work. If you do `fadeIn()` instead of `show()` you will have to do the same there too with `$(this).parents('.panel').removeClass('hidden');` – Michail Michailidis Oct 22 '14 at 19:17

How find all elements with a specific css property in a div and add a class to div

1 Answers1