Question

我希望通过课程<div>获得itemPrice的总价值

我的HTML

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

参考文献： - jsFiddle

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，将它们相加并使用类total在div中显示结果。

$(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>

我想将多个div与同一个类相加

4 个答案: