0

尝试计算具有相同属性的 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 个 div 的 data-record="1" 它应该显示在 #product-id-8 (2)

先感谢您。

4

2 回答 2

2

我不确定您要实现什么目标，但我建议仅获取具有数据记录的元素，然后更有效地遍历它们以获得您的总数。您可以使用选择器执行此操作，例如：

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>
于 2013-10-10T07:10:48.987 回答
1

这是工作代码。它遍历元素，将结果存储在一个对象中，然后在第二个循环中将数字添加到列表中。( 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+')');
    });
});
于 2013-10-10T07:06:13.417 回答