summing class values in jquery

Question

what's the easiest way to sum values who all are in the same class

<div class='head'>
  <div class='title'>
    <div class='sumMe'>$1.01</div>
  </div>
</div>

<div class='head'>
  <div class='title'>
    <div class='sumMe'>$2.01</div>
  </div>
</div>

sumMe = 3.02

How would you specify parents to make sure you are going down the right hiearchy? — Rod
– Rod, Commented Jul 27, 2011 at 13:11

hunter · Accepted Answer · 2011-07-27 14:06:00Z

4

You can achieve this quickly using a jQuery each loop, the Number() function, and the isNan() function just to be on the safe-side.

var sum = 0;

$(".sumMe").each(function(){
   var value = Number($(this).text());
   // or parseInt($(this).text(), 10);
   sum += isNaN(value) ? 0 : value;
});

alert(sum);

edited Jul 27, 2011 at 14:06

answered Jul 27, 2011 at 12:55

hunter

63.8k19 gold badges115 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eran Galperin Over a year ago

Exactly what I was going to write. You should add the base (10) to your parseInt call though, since for certain numbers you'll get odd results otherwise (it guesses the base)

Rod Over a year ago

updated OP if i may, what if it's a float, do i still need the radix? Will i have to manually strip dollar sign?

Chandu · Accepted Answer · 2011-07-27 12:55:54Z

1

Try this:

var sumMeTotal = 0;
$(".sumMe").each(function(){
     //Use parseInt with a radix 10 
    var sumMe = parseInt($(this).text(), 10);
    sumMeTotal += sumMe;
});
alert(sumMeTotal);

answered Jul 27, 2011 at 12:55

Chandu

83.2k19 gold badges137 silver badges136 bronze badges

Comments

Najam Awan · Accepted Answer · 2011-07-27 13:00:54Z

1

var sum = 0;

$(".sumMe").each(function(){
   sum += +($(this).html());
});

alert(sum);

check working example here http://jsfiddle.net/RU8bm/

answered Jul 27, 2011 at 13:00

Najam Awan

1,1453 gold badges14 silver badges32 bronze badges

Collectives™ on Stack Overflow

summing class values in jquery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related