Jquery - Граф количество элементов имени класса

Question

Я использую этот скрипт для создания галереи с категориями: http://codyhouse.co/gem/content-filter/

Мои поиски, чтобы выяснить, как иметь общее число шоу по каждой категории связи, которая суммирует количество изображений в этой категории. Все изображения различаются определенным классом.

Так с ниже, я хотел бы, чтобы в конечном счете, его туда, где ссылки категорий будет выглядеть следующим образом:

Category 1 (4) 
Category 2 (3) 
Category 3 (6) 

С цифрами в круглых скобках с указанием количества изображений имени каждого класса указаны в ссылку категории. Есть идеи?

<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> 

Answer 1

Вы можете использовать .length, чтобы получить количество элементов с заданными классами.

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

Эти значения длины могут быть добавлены к элементам каждого фильтра

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

Если сумма всех категорий должна быть добавлена, а также, имеют переменную и суммирование длины, как этот

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

Вот демо http://jsbin.com/qudejo/edit?html,js,output