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