Jquery

Question

我正在使用此脚本制作一个包含以下类别的画廊：http://codyhouse.co/gem/content-filter/

我的任务是弄清楚如何让每个类别显示的总数 link 总计该类别中的图像数量。所有图像都以一定的方式区分 class.

所以对于下面的内容，我想最终将它放到类别 links 看起来像这样的地方：

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

括号中的数字表示以类别 link 中指定的每个 class 命名的图像数量。有什么想法吗？

<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

Jquery - 计算以 class 命名的项目数量

Jquery - Count amount of items named after a class

count

gallery

counter

categories