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 + ')' );
Comments
Post a Comment