Jquery - Count amount of items named after a class -


i using script make gallery categories: http://codyhouse.co/gem/content-filter/

my quest figure out how have total number show each category link totals amount of images in category. images differentiated class.

so below, i'd have category links this:

category 1 (4) category 2 (3) category 3 (6) 

with numbers in parenthesis indicating amount of images named after each class specified in category link. ideas?

<div class="cd-tab-filter">   <ul class="cd-filters">     <li class="filter"><a class="selected" href="#0" data-type="all">view all</a></li>     <li class="filter" data-filter=".category-1"><a href="#0" data-type="category-1">category 1</a></li>     <li class="filter" data-filter=".category-2"><a href="#0" data-type="category-2">category 2</a></li>     <li class="filter" data-filter=".category-3"><a href="#0" data-type="category-3">category 3</a></li>   </ul> </div>  <div class="cd-gallery">   <ul>     <li class="mix category-1"></li>     <li class="mix category-1"></li>     <li class="mix category-1"></li>     <li class="mix category-1"></li>      <li class="mix category-2"></li>     <li class="mix category-2"></li>     <li class="mix category-2"></li>      <li class="mix category-3"></li>     <li class="mix category-3"></li>     <li class="mix category-3"></li>     <li class="mix category-3"></li>     <li class="mix category-3"></li>     <li class="mix category-3"></li>   </ul> </div> 

you can use .length count of elements given classes.

$('.category-1').length $('.category-2').length $('.category-3').length 

these length values can appended each filter elements

$('.cd-filters li[data-filter]').each(function(){   var reqclass = $(this).data('filter'); // <--- classes .category-1, .category-2 , .category-3   var len = ' ('+$(reqclass).length+')'; // <--- $('.category-1').length   $(this).append(len); }); 

if total of categories needs added well, have variable , sum lengths

var total = 0; $('.cd-filters li[data-filter]').each(function(){   var reqclass = $(this).data('filter'); // <--- classes .category-1, .category-2 , .category-3   var len = +$(reqclass).length; // <--- $('.category-1').length   $(this).append(' (' + len + ')' );   total += len }); // use total append first li (view all) $('li [data-type="all"]').append(' (' + total + ')' ); 

here demo http://jsbin.com/qudejo/edit?html,js,output


Comments