2

我有一个带有许多图像的 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>

更新： 我想用以下内容替换#count div以显示数字：

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

4

2 回答 2

2

您可以使用类名作为键、计数器作为值的对象：

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;
});

有很多方法。

于 2013-03-23T14:07:25.853 回答
1

如果您预先知道这些类是什么，您可以将它们存储在这样的数组中：

var types = ['merc', 'bmw', 'mit', 'ford'];

$.each(types, function (i, type) {
    $('div.' + type).html( $('img.' + type).length );
});
于 2013-03-23T14:13:10.213 回答