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

Jquery - 计算类命名的项目数量

1 个答案: