我想用同一个类对多个 div 求和

Question

我想从<div>的类中获取总值itemPrice

我的网页

<div class="itemPrice">1,000</div>
<div class="itemPrice">2,000.50</div>
<div class="itemPrice">3,000</div>
<div class="itemPrice">1,020.54</div>
<div class="itemPrice">4,200</div>
<div class="itemPrice">3,500</div>
<div class="total">?????</div>

我的JavaScript

$(document).ready(function() {
    var sum = 0;
    $(".itemPrice").each(function() {
          var val = $.trim($('.itemPrice').text());
          // val = val.split(",")
          if (val) {
              val = parseFloat( val.replace( /^$/, "" ) );
              sum += !isNaN( val ) ? val : 0;
          }
    });
    $('.total').text(sum);
});

但是由于逗号(，(，它不起作用。

Answer 1

你可以使用这个：

<div class="itemPrice">1,000</div>
<div class="itemPrice">2,000.50</div>
<div class="itemPrice">3,000</div>
<div class="itemPrice">1,020.54</div>
<div class="itemPrice">4,200</div>
<div class="itemPrice">3,500</div>
<div class="total">?????</div>
<script>
    $(document).ready(function(){
        var total = 0;
        $('.itemPrice').each(function(){
            total += parseFloat($(this).text().replace(/,/g,''))
        })
        $('.total').text(total)
    })
</script>

Answer 2

也适用于多个逗号 ：-

$(document).ready(function() {
     var total = 0; // a variable
     $('.itemPrice').each(function(){ // iterate itemPrice 
        total  = parseFloat($(this).text().replace(/,/g , ''))+total; // remove comma from text and then convert to float and add it to total variable
     });
     total = addCommas(total); // again add comma to match represenation like others
    $('.total').html(total); // paste output to resultant div
});
function addCommas(nStr) { // pass value to function
    nStr += '';
    var x = nStr.split('.'); //split value with .
    var x1 = x[0];
    var x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(d+)(d{3})/;
    while (rgx.test(x1)) { //check  array first value with regular expression
        x1 = x1.replace(rgx, '$1' + ',' + '$2'); // add comma based on check
    }
    return x1 + x2; // return final value
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="itemPrice">1,000</div>
<div class="itemPrice">2,000.50</div>
<div class="itemPrice">3,000</div>
<div class="itemPrice">1,020.54</div>
<div class="itemPrice">4,200</div>
<div class="itemPrice">3,500</div>
<br/><br/>
<div class="total">?????</div>

参考资料：-使用 Javascript 或 jQuery 将千位分隔符添加到总数中？

Answer 3

$(document).ready(function() {
     var sum = 0;
        $(".itemPrice").each(function() {
            var val = $(this).text();
            sum += parseFloat(val.replace(/,/g,''))
        });
        $('.total').text(sum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="itemPrice">1,000</div>
<div class="itemPrice">2,000.50</div>
<div class="itemPrice">3,000</div>
<div class="itemPrice">1,020.54</div>
<div class="itemPrice">4,200</div>
<div class="itemPrice">3,500</div>
<div class="total">?????</div>

Answer 4

这就是我使用 jQuery 的方式。itemPrice使用类循环遍历div，将它们相加并在div 中显示结果，并带有类total。

$(document).ready(function() {
    var sum = 0;
    $('.itemPrice').each(function(index) {
        sum += parseFloat($( this ).text().replace(',',''));
    });
    
    $('.total').html(sum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="itemPrice">1,000</div>
<div class="itemPrice">2,000.50</div>
<div class="itemPrice">3,000</div>
<div class="itemPrice">1,020.54</div>
<div class="itemPrice">4,200</div>
<div class="itemPrice">3,500</div>
<div class="total">?????</div>