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(,).

This answer could help you https://stackoverflow.com/a/44236062/1209018. But use a class selector. — Rajaprabhu Aravindasamy, May 29 '17 at 07:03
What @RajaprabhuAravindasamy said, but also try to wrap the value in parseInt, because of the comma's and periods. — Jeff Huijsmans, May 29 '17 at 07:04
@PirunTirapibal get rid of them using `str.replace(',','')` and/or a regex before using the value. — Jeff Huijsmans, May 29 '17 at 07:09

score 2 · Answer 1 · answered May 29 '17 at 07:10

2

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>

answered May 29 '17 at 07:10

Mohammad Hamedani

3,304
3
10
22

Serious question, curious: is there a reason to use `.replace(/,/g,'')` instead of `.replace(',','')`? – Jeff Huijsmans May 29 '17 at 07:11
Thanks, I love this – Pirune Tirapibal May 29 '17 at 07:12
1

Yes, if you have two comma like **1,000,000** , `.replace(',','')` return **1000,000** . @JeffHuijsmans – Mohammad Hamedani May 29 '17 at 07:16
You're welcome. if it's worked, please accept it. @PirunTirapibal – Mohammad Hamedani May 29 '17 at 07:17
Okay Thanks +1 :) – Pirune Tirapibal May 29 '17 at 07:20
@PirunTirapibal this above code will return output without comma separator:- https://jsfiddle.net/ebkfnzja/ .so it's not the exact answer. Also when multiple number of commas will be there then also this will not wok. – Alive to die - Anant May 29 '17 at 07:42

Alive to die - Anant · Answer 2 · 2017-05-29T08:48:58.857

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?

score 0 · Answer 3 · answered May 29 '17 at 07:20

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

score 0 · Answer 4 · answered May 29 '17 at 07:21

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>

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

4 Answers4