Question

在提供的标签中显示每个块各自总和的最佳方法是什么？

  <div class='block1'><label for='blockSum'>Sum goes here</label>
    <div class='head'>
      <div class='title'>
        <div class='sumMe'>$1.01</div>
      </div>
    </div>          
    <div class='head'>
      <div class='title'>
        <div class='sumMe'>$2.01</div>
      </div>
    </div>
  </div>
  <div class='block2'><label for='blockSum'>Sum goes here</label>
    <div class='head'>
      <div class='title'>
        <div class='sumMe'>$1.01</div>
      </div>
    </div>          
    <div class='head'>
      <div class='title'>
        <div class='sumMe'>$2.01</div>
      </div>
    </div>
  </div>

Answer 1

假设每个块都是一个类block：

$('.block').each(function() {
    var total = 0; // total in cents
    $(this).find('.sumMe').each(function() {
        var parts = $(this).text().replace('$', '').split('.'); // prepare text
        total += +parts[0] * 100 + (+parts[1] || 0); // compute value in cents
    });
    $(this).find('label').text('$' + (total/100).toFixed(2)); // write sum
});

DEMO

不要将float值用于计算资金（尽管可能比我的更容易）。

Answer 2

$('.block1,.block2').each(function(){
     var sumValue=0;
     $('.sumMe',this).each(function(i,v){
         sumValue=sumValue+parseFloat($(v).text().replace('$','')||0);
     });
     $('label:first',this).html('$'+sumvalue);
});

Answer 3

试试这个

$('.block1,.block2').each(function(){
     var total=0;
     $('.sumMe',this).each(function(){
         total = total + parseFloat($(this).text().replace('$',''));
     });

     $(this).find("label").html("$"+total);
});

Answer 4

这样的事情应该可以解决问题，尽管使用parseFloat会导致愚蠢的金钱价值：

$('div[class^="block"]').each(function() {
    var total = 0;
    $(this).find(".sumMe").each(function() {
       total += parseFloat($(this).text().replace("$", ""));
    });
    $(this).find("label").text("TOTAL: " + total);
});

这将查找所有div个元素，其类以“block”开头（请注意，如果您有多个类，block类必须是列出的第一个类），遍历匹配的集合，将所需的字符串转换为浮点数，将每个字符串相加，然后将结果写入label元素。

Answer 5

这应该这样做

$('div[class^="block"]').each(function() {
    var sum = 0; //create a sum variable for each block
    var block = $(this);
    block
        .find('.sumMe') // find the .sumMe elements for each block
        .each(function() {
           sum += +$(this).text().replace('$', ''); // convert text to number and add to sum 
        })
        .end() // return to block element
        .prepend('Sum of ' + block.attr('class') + ' is ' + Math.round(sum*100)/100); // prepend the sum to the block

});

演示http://jsfiddle.net/gaby/r2yq9/

导航dom

5 个答案: