Add number from divs with jQuery

Question

I have these divs.

<div class="prices">11.99</div>
<div class="prices">1.99</div>
<div id="price">99</div>

How can I add all the numbers from the divs?

The final result must be 11.99+1.99+99=112.98

Thank you.

http://stackoverflow.com/questions/2417553/jquery-calculate-sum-of-values-in-all-text-fields possible duplicate — Dorvalla, Oct 11 '14 at 18:48
I didn't knew how to start it. I knew that there must be some kind of a loop but didn't knew how to do it. And why all this hate? Geez — Luchezar, Oct 11 '14 at 18:56

score 4 · Accepted Answer · answered Oct 11 '14 at 18:50

4

You can do it like this.

var controls = $("div");
var sum = 0;
for (var i = 0; i < controls.length; i++) {
  var ct = parseFloat($(controls[i]).text());
  sum += ct;
}
alert(sum);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prices">11.99</div>
<div class="prices">1.99</div>
<div id="price">99</div>

answered Oct 11 '14 at 18:50

Arindam Nayak

7,346
4
32
48

@semprom , cool ,you can also use `$("div").each` to make it work! – Arindam Nayak Oct 11 '14 at 18:56
Plus at the end we can use sum.toFixed(2) to make the number 120.98 ( not 120.97999999999999 ). – Luchezar Oct 11 '14 at 19:09
Yes, but when i ran this in my browser, it directly gave me `120.98` . – Arindam Nayak Oct 11 '14 at 19:10
It gives me the larger result. Strange. Never mind. I just wanted to tell if someone get the longer result to use toFixed. – Luchezar Oct 11 '14 at 19:14

Donal · Answer 2 · 2014-10-11T19:02:47.700

If you just want to sum the values from divs with the class of prices or the id of price. You could do something like this:

var p = 0;
$('.prices').each(function() {p += parseFloat($(this).text());})
$('#price').each(function() {p += parseFloat($(this).text());})    
$('#result').text(p);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prices">11.99</div>
<div class="prices">1.99</div>
<div id="price">99</div>
Result: <div id="result"></div>

score 2 · Answer 3 · answered Oct 11 '14 at 18:58

One possible solution is this:

var sum = 0;
$("div").filter(function () {
    if ($(this).attr("class") == "prices" || $(this).attr("id") == "price") {
        return sum += parseFloat($(this).text());
    }
});
console.log(sum);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prices">11.99</div>
<div class="prices">1.99</div>
<div id="price">99</div>

score 1 · Answer 4 · answered Oct 11 '14 at 19:00

1

Below code works...

jQuery Code

var price = 0;
$('div.prices, div#price').each(function(){ 
    price = price + parseFloat($(this).html());                 
});
alert(price)

http://jsfiddle.net/6uLs92r7/

answered Oct 11 '14 at 19:00

Divakar Gujjala

803
8
24

Add number from divs with jQuery

4 Answers4