add numbers using jQuery

Question

Hi Guys simple question (but failed to do this :( ). Just want to add all the numbers in <li>

PLeae check fiddle here http://jsfiddle.net/6j0xq49v/1/

Or you can check my code below

<ul>
    <li>2</li>
    <li>2</li>
    <li>2</li>
    <li>2</li>
    <li>2</li>
    <li>2</li>
</ul>
<button>Click</button>
<div class="total"><div>

SCRIPT

$('button').click(function(){
var thistext = 0;
$('ul li').each(function(){
    thistext = $(this).text();
    thistext += parseInt(thistext)
    alert(thistext)
})
})

Please help me guys Thanks in advance :)

Ben Cook · Accepted Answer · 2015-08-11 12:43:48Z

2

You're assigning both the sum and each individual value to thistext. Try this:

$('button').click(function(){
  var thistext = 0;
  $('ul li').each(function(){
    thistext += parseInt($(this).text());
    alert(thistext);
  });
  $('.total').text(thistext);
});

Here's a working fiddle: http://jsfiddle.net/6m81xcp0/

UPDATE

If you need to account for the case where not all li elements contain numbers:

$('button').click(function(){
  var thistext = 0;
  $('ul li').each(function(){
    var text = $(this).text();
    if (isNaN(text)) { return; }
    thistext += parseInt(text);
    alert(thistext);
  });
  $('.total').text(thistext);
});

http://jsfiddle.net/6m81xcp0/1/

edited Aug 11, 2015 at 12:43

answered Aug 11, 2015 at 12:34

Ben Cook

1,6842 gold badges18 silver badges33 bronze badges

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

2 Comments

Kamal Over a year ago

thanks for help .. but one more question .. if there is no number some <li> there is string then how to handle it for ur reff please check fiddle here jsfiddle.net/6j0xq49v/2

Ben Cook Over a year ago

You can check whether the text value is a number by calling isNaN. See updated answer.

Jai · Accepted Answer · 2015-08-11 12:44:20Z

0

Remove this line:

thistext = $(this).text();

and use this way:

$('button').click(function() {
  var thistext = 0;
  $('ul li').each(function(a, v) {
     thistext += (+v.textContent); // parsing to number if prepend with +
  });
  $('.total').text(thistext);
  console.log(thistext);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>2</li>
  <li>2</li>
  <li>2</li>
  <li>2</li>
  <li>2</li>
  <li>2</li>
</ul>
<button>Click</button>
<div class="total">
  <div>

answered Aug 11, 2015 at 12:44

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

add numbers using jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related