?
Solved

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

Posted on 2012-04-11
4
Medium Priority
?
346 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 668 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 664 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 668 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

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

585 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