Question

在尝试使用相同属性计算DIV并显示结果时，我遇到了jquery代码问题。我的代码是：

  $(function(){
   $.each($('.single-record #product'), function(index, item) {
    if ($(item).data('record')=='1') {
        $('#product-id-1').append('('+$('.'+$(item).data('record')).length+')');
    }else if ($(item).data('record')=='2') {
        $('#product-id-2').append('('+$('.'+$(item).data('record')).length+')');
    }else if ($(item).data('record')=='3') {
        $('#product-id-3').append('('+$('.'+$(item).data('record')).length+')');
    }else if ($(item).data('record')=='4') {
        $('#product-id-4').append('('+$('.'+$(item).data('record')).length+')');
    }else if ($(item).data('record')=='5') {
        $('#product-id-5').append('('+$('.'+$(item).data('record')).length+')');
    }else if ($(item).data('record')=='6') {
        $('#product-id-6').append('('+$('.'+$(item).data('record')).length+')');
    }else if ($(item).data('record')=='7') {
        $('#product-id-7').append('('+$('.'+$(item).data('record')).length+')');
    }else if ($(item).data('record')=='8') {
        $('#product-id-8').append('('+$('.'+$(item).data('record')).length+')');
    }
});
});

此外，我已将所有内容放入jsfiddle：http://jsfiddle.net/bvGVS/

请帮我展示一些具有相同属性的div - 例如，如果有2个带有data-record =“1”的div，它应该显示在＃product-id-8（2）

中

提前谢谢。

Answer 1

我不确定你想要实现什么，但我建议只抓取带有数据记录的元素，然后更有效地迭代它们以获得总数。您可以使用选择器执行此操作，例如：

var counter_object = {}; // json awesome-ness...
$(function(){

    var elements = $('[data-record]');
    $.each(elements, function(){

        var element = $(this);
        var record = element.data('record');

        if (counter_object[record] == undefined)
            counter_object[record] = 0;
        counter_object[record] += 1;

    });

    // output the results however you'd like...
    // here I'm just using the status DIV container...
    $.each(counter_object, function(index, value){
        $('#status_container')
            .append('<div>Record '+ index +' has '+ value +' results(s)</div>');
    });
});

这是我使用的HTML：

<div id="record-12" class="single-record">
    <div id="product" data-record="1"></div>
</div>
<div id="record-13" class="single-record">
    <div id="product" data-record="2"></div>
</div>
<div id="record-14" class="single-record">
    <div id="product" data-record="1"></div>
</div>

<div id="status_container"></div>

Answer 2

这是工作代码。它遍历元素，将结果存储在对象中，然后在第二个循环中将数字添加到列表中。（JSFiddle）

<div id="record-12" class="single-record">
        <div class="product" data-record="1"></div>
</div>
<div id="record-13" class="single-record">
        <div class="product" data-record="2"></div>
</div>
<div id="record-14" class="single-record">
        <div class="product" data-record="1"></div>
</div>

<div id="product-id-1">Product 1 </div>
<div id="product-id-2">Product 2 </div>
<div id="product-id-3">Product 3 </div>
<div id="product-id-4">Product 4 </div>
<div id="product-id-5">Product 5 </div>
<div id="product-id-6">Product 6 </div>
<div id="product-id-7">Product 7 </div>
<div id="product-id-8">Product 8 </div>

$(function(){
    var obj ={};
    $.each($('.single-record .product'), function(index, item) {
        var record = $(item).data('record');
        if ($('#product-id-'+record).length > 0) obj[record] = $('div[data-record="'+record+'"]').length;
    });
    $.each(obj,function(i, el){
        $('#product-id-'+i).append('('+el+')');
    });
});

计算具有相同属性的div并显示结果

2 个答案: