Solved

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

Posted on 2012-04-11
4
336 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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 …

919 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now