Sum of values from different divs with the same class

Question

I am loading dynamically divs that have a .totalprice class. At the end, I would like to sum of the values from all of the .totalprice.

Answer 1

To build on what Rionmonster's did, this works for me:

HTML:

<div class="totalprice">6.7</div>
<div class="totalprice">8.9</div>
<div class="totalprice">4.5</div>

JavaScript:

var sum = 0;
$('.totalprice').each(function()
{
    sum += parseFloat($(this).text());
});
alert(sum);

Output:

21.1

I find that in getting the value out of a <div> you have to use the .text() selector. Here is the fiddle to see it work: http://jsfiddle.net/davecoulter/7D7nR/

Answer 2

If you do this very often throughout your code, it is recommended to put it in a nice reusable function

function removeComma(x)
{
   if (x) 
   {
       if (x.length > 0) 
       {
        return x.replace(/,/g,'');
       }
   }
}
function sum_class(list,source)
{
    // source can be text for non input DOM elements or value for text inputs
    var total = 0;
    $(list).each(function() {
    if (source == 'text') 
    {
         total += parseFloat(removeComma($(this).text()));
    }
    else
    {
         total += parseFloat(removeComma($(this).val()));
        }
    }); 
    return total;
}

Keep in mind that both functions use variables I've name to what makes sense to me, you can rename them to what you understand works better for you, like the name of the function sum_class, is not referring to an OOP class but the the purpose of the function which is to return the total of values from elements that belong to the same class.

Answer 3

(function( $ ){
   $.fn.sum=function () {
    var sum=0;
        $(this).each(function(index, element){
            if($(element).val()!="")
            sum += parseFloat($(element).val());
        });
    return sum;
    }; 
})( jQuery );
alert($('.abcd').sum());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='abcd' value='1'>
<input type='text' class='abcd' value='5'>

More JQUERY Codes

Answer 4

Unless you're absolutely certain about the value of your content, you will not be able to use parseFloat out of the box.

You need to be sure to handle:

• Excessive Whitespace
• Leading $
• Blanks
• Unexpected Strings

Take a look:

<div class="totalprice">  $1.25 </div>
<div class="totalprice">0.25     </div>
<div class="totalprice">$3.00 </div>
<div class="totalprice">  2.50</div>
<div class="totalprice">$0.01</div>
<div class="totalprice">  </div>

The following will handle all cases:

var sum = 0;

$(".totalprice").each(function() {
    var val = $.trim( $(this).text() );

    if ( val ) {
        val = parseFloat( val.replace( /^\$/, "" ) );

        sum += !isNaN( val ) ? val : 0;
    }
});

console.log( sum );

See also: http://jsfiddle.net/rwaldron/hfA5V/

Answer 5

For <div> Elements:

var sum = 0;
$('.totalprice').each(function(){
    sum += parseFloat($(this).text());  // Or this.innerHTML, this.innerText
});

You can see a working example of this here

For <input> Elements (inputs, checkboxes, etc.):

var sum = 0;
$('.totalprice').each(function(){
    sum += parseFloat(this.value);
});

Alternatively, if you are looking for an integer, you can use the parseInt() function.

You can see a working example of this here.

Answer 6

for non input elements:

var sum = 0;
$('.totprice').each(function(){
    sum = parseFloat(sum) + parseFloat($(this).text());
});
alert(sum);

for input elements:

var sum = 0;
$('.totprice').each(function(){
    sum = parseFloat(sum) + parseFloat(this.value);
});
alert(sum);