我有一个带有许多图像的div。现在每个图像都有一个类,许多图像都有相同的类。现在我想循环遍历每个图像,收集其类并计算具有特定类的图像的数量…
HTML:<div id="articleThumb">
<ul id="makeThumb">
<li>
<img class="merc" src="../img/items/merc_sedan.jpg" />
</li>
<li>
<img class="merc" src="../img/items/merc_sedan2.jpg" />
</li>
<li>
<img class="bmw" src="../img/items/bmw_sedan.jpg" />
</li>
<li>
<img class="bmw" src="../img/items/bmw_hatchback.jpg" />
</li>
<li>
<img class="bmw" src="../img/items/bmw_sedan3.jpg" />
</li>
<li>
<img class="ford" src="../img/items/ford_sedan.jpg" />
</li>
<li>
<img class="ford" src="../img/items/ford_hatchback.jpg" />
</li>
<li>
<img class="ford" src="../img/items/ford_bakkie.jpg" />
</li>
<li>
<img class="ford" src="../img/items/ford_suv.jpg" />
</li>
<li>
<img class="mit" src="../img/items/mit_sedan.jpg" />
</li>
<li>
<img class="merc" src="../img/items/merc_suv.jpg" />
</li>
<li>
<img class="bmw" src="../img/items/bmw_suv.jpg" />
</li>
<li>
<img class="bmw" src="../img/items/bmw_suv2.jpg" />
</li>
<li>
<img class="mit" src="../img/items/mit_suv.jpg" />
</li>
<li>
<img class="mit" src="../img/items/mit_bakkie.jpg" />
</li>
</ul>
</div>
现在我知道我可以使用:
$('.bmw').length;
计算带有.bmw类的图像的数量,但是如果你有300个类,那就不那么有效了。
我想做的是用jQuery确定类(不是由我指定的),并像这样计数:
$('#articleThumb ul li img').each(function () {
var y = $(this).attr('class');
var allClasses = [y];
});
现在计算所有类,并将每个类的计数附加到其匹配的显示div…
var countEachClass = allClasses.length;
$(countEachClass).appendTo('#count .' + [y]);
<div id="count">
<div class="bmw">number calculated by .length</div>
<div class="merc">number calculated by .length</div>
<div class="ford">number calculated by .length</div>
...etc
</div>
更新:我想用后面的替换#countdiv来显示数字:
<article class="make">
<div class="content">
<h4><a class="merc" href="#latestClick">Mercedes-Benz</a></h4>
<div class="date">12 March 2013</div>
<div class="count">THE NUMBER HERE</div>
</div>
</article>
<article class="make latest">
<div class="content">
<h4><a class="bmw" href="#latestClick">BMW</a></h4>
<div class="date">12 March 2013</div>
<div class="count">THE NUMBER HERE</div>
</div>
</article>
答: http://jsfiddle.net/YNqGR/9/
可以使用类名作为键,计数器作为值的对象:
var map = {};
$('#articleThumb ul li img').each(function () {
map[this.className] = (map[this.className] || 0) + 1;
});
现在可以遍历对象并对其进行任何操作。注意,这只会在每个图像只有一个类的情况下起作用。
附加到另一个元素后就是:
$('#count').children().text(function() {
return map[this.className] || 0;
});
如果元素还不存在,你必须创建它们:
var $count = $('#count');
$.each(map, function(cls, count) {
$count.append($('<div />', {'class': cls, text: count}));
});
实际上,最后一次更新也让我意识到,如果元素已经存在,你可以这样做:
var $images = $('#articleThumb ul li img');
$('#count').children().text(function() {
return $images.filter('.' + this.className).length;
});
如果您事先知道这些类将是什么,您可以将它们存储在像这样的数组中:
var types = ['merc', 'bmw', 'mit', 'ford'];
$.each(types, function (i, type) {
$('div.' + type).html( $('img.' + type).length );
});