Solved

JQuery question -- adding up all the values inside elements that have a specific class name?

Posted on 2012-04-11
4
339 Views
Last Modified: 2012-04-12
If I have an unordered list like the following ...

<ul id="budget_list">
   <li>Rent <span class="budget_item">1000</span></li>
   <li>Groceries <span class="budget_item">500</span></li>
   <li>Cable Bill <span class="budget_item">150</span></li>
</li>

Open in new window


... using JQuery -- how would I add up all the values that are inside elements that have the class name "budget_item" attached to them?

For example, .. I'd want to add up 1000 + 500 + 150, and yield the correct sum of "1650"

Is this possible to achieve using jquery?  If so, ... how?

Thanks,
- Yvan
0
Comment
Question by:egoselfaxis
4 Comments
 
LVL 13

Accepted Solution

by:
haloexpertsexchange earned 167 total points
ID: 37834705
how about
var total = 0;
$('.budget_item').each(function(){

total = total  + $(this).text();
});
0
 
LVL 23

Assisted Solution

by:basicinstinct
basicinstinct earned 166 total points
ID: 37834799
A couple enhancements on halo's approach. I would always check it's numeric cos i am paranoid...



var total = 0;
$('.budget_item').each(function(){
  var next =  $(this).text();
  if($.isNumeric(next))
  {
     total = total  + parseInt(next);
  }
});
0
 
LVL 20

Assisted Solution

by:BuggyCoder
BuggyCoder earned 167 total points
ID: 37834813
var total = 0;
$('.budget_item').each(function(){

total = total  + parseInt($(this).text());
});

Open in new window

0
 

Author Closing Comment

by:egoselfaxis
ID: 37837259
Thanks guys!
0

Featured Post

The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question