I want to sum multiple div's with the same class

Question

I want to get the total value from <div> 's with the class itemPrice

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

My 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);
});

But it does not work because of the comma(,).

Answer 1

You can use this:

<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

worked for multiple commas as well :-

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

Reference taken:- Add a thousands separator to a total with Javascript or 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

This is how I'd do it using jQuery. Loop through the divs with itemPrice class, add them up and display the result in div with the class 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>