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
.
-
can you show us the DOM?– JohnJohnGaAug 30, 2011 at 21:01
7 Answers
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.
-
1
-
@lonesomeday - the initial var was a typo, added this.value, as per your request. Aug 30, 2011 at 21:04
-
If its
div
, then you need to usethis.innerText
orthis.innerHTML
:)– MrchiefAug 30, 2011 at 21:06 -
this.value only works for form elements, not DIVs as the question specified. Aug 30, 2011 at 21:07
-
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/
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/
(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'>
-
pls add some information about why your answer is correct what you do or what differs it from other answers– tungApr 28, 2018 at 10:49
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);
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.
THIS WILL WORK WITH PURE VANILLA JS
<input type="text" value=" " class="percent-input"> <br>
<input type="text" value=" " class="percent-input"> <br>
<input type="text" value=" " class="percent-input"> <br>
<p>Total Value :<span id="total">100%</span></p>
<p>Left Value :<span id="left">0.00%</span></p>
var percenInput = document.querySelectorAll('.percent-input');
for (let i = 0; i < percenInput.length; i++) {
percenInput[i].addEventListener('keyup', getPercentVal)
}
function getPercentVal() {
var total = 0;
var allPercentVal = document.querySelectorAll('.percent-input');
for (var i = 0; i < allPercentVal.length; i++) {
if (allPercentVal[i].value > 0) {
var ele = allPercentVal[i];
total += parseFloat(ele.value);
}
}
document.getElementById("total").innerHTML = total.toFixed(2) + '%';
document.getElementById("left").innerHTML = (100 - total).toFixed(2) + '%';
}