JQuery count div that has a mapping: none attribute

Question

I want to count a div that has the class name "items" and has the attribute "style = display: none".

<div id="skills"> <div class="items" style="display:none">1</div> <div class="items">2</div> <div class="items">3</div> <div class="items" style="display:none">4</div> <div class="items" style="display:none">5</div></div> 

the output should be "3".

==================================================== ==========

addition to the problem:

 <div id="skills1"> <div class="items" style="display:none">1</div> <div class="items">2</div> <div class="items">3</div> <div class="items" style="display:none">4</div> <div class="items" style="display:none">5</div></div> <div id="skills2"> <div class="items" style="display:none">1</div> <div class="items" style="display:none">2</div> <div class="items" style="display:none">3</div> <div class="items" style="display:none">4</div> <div class="items" style="display:none">5</div></div> 

the output should be "3" and "5".

Answer 1

Original:

 var count = $('div.items:hidden').length; 

New:

 var counts = {}; $('#skills1,#skills2').each( function() { counts[$(this).attr('id')] = $('div.items:hidden', $(this)).length; } 

The counts object will be:

 { skills1 : 3, skills2 : 5 } 

Last (?)

 $('#skills1,#skills2').each( function() { if ($('div.items:hidden',$(this)).length == 0) { $(this).hide(); } }); 

It would be even easier if you gave the “containers” a class to use as a selector. Then you can simply replace #skills1,#skills2 with a class selector and not have a function depending on the DIV names, which means that you won’t need to change it if you add another container, say skills3 . You just need to make sure this container matches the class.