How can i sum of multiple numbers with each function in jquery?

Question

I want to sum of multiple numbers but this is unable to work with each function.

What is tried:-

 totalPgCost(); function totalPgCost(){ var totalPgCost = 0; $('.pgBookingTable tr').find('.pgCost').each(function(){ totalPgCost += $(this).val(); }); $('.totalPgCost').text(totalPgCost); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <table class="pgBookingTable"> <tr><td><span class="pgCost">10000</span></td><tr> <tr><td><span class="pgCost">5000</span></td><tr> <tr><td>Total <span class="totalPgCost"></span> /-</td><tr> </table> 

Why i'm getting 0?

Answer will appreciated!

Answer 1

You need text not val . Also the html table is not properly balanced, as there was no closing tr . Before adding the convert the string to number

 totalPgCost(); function totalPgCost() { var totalPgCost = 0; $('.pgBookingTable tr').find('.pgCost').each(function() { totalPgCost += parseInt($(this).text().trim(), 10); }); $('.totalPgCost').text(totalPgCost); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <table class="pgBookingTable"> <tr> <td><span class="pgCost">10000</span></td> </tr> <tr> <td><span class="pgCost">5000</span></td> </tr> <tr> <td>Total <span class="totalPgCost"></span> /-</td> </tr> </table> 

You can also avoid find if you are sure that only span will inside thar table will have that class

 totalPgCost(); function totalPgCost() { var totalPgCost = 0; $('.pgBookingTable .pgCost').each(function() { totalPgCost += parseInt($(this).text(), 10); }); $('.totalPgCost').text(totalPgCost); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <table class="pgBookingTable"> <tr> <td><span class="pgCost">10000</span></td> </tr> <tr> <td><span class="pgCost">5000</span></td> </tr> <tr> <td>Total <span class="totalPgCost"></span> /-</td> </tr> </table> 

Answer 2

Use .text

$('.pgBookingTable tr').find('.pgCost').each(function(){
   totalPgCost += parseInt($(this).text());
});

Answer 3

  totalPgCost(); function totalPgCost(){ var totalPgCost = 0; $('.pgBookingTable tr').find('.pgCost').each(function(){ totalPgCost += parseInt($(this).text()); }); $('.totalPgCost').text(totalPgCost); } 

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <table class="pgBookingTable"> <tr><td><span class="pgCost">10000</span></td><tr> <tr><td><span class="pgCost">5000</span></td><tr> <tr><td>Total <span class="totalPgCost"></span> /-</td><tr> </table> 

Answer 4

you can directly use pgCost for each loop and use text() instead of val() to get the text within span hope this helps

 totalPgCost(); function totalPgCost(){ var totalPgCost = 0; $('.pgCost').each(function(){ totalPgCost += parseInt($(this).text()); }); $('.totalPgCost').text(totalPgCost); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <table class="pgBookingTable"> <tr><td><span class="pgCost">10000</span></td><tr> <tr><td><span class="pgCost">5000</span></td><tr> <tr><td>Total <span class="totalPgCost"></span> /-</td><tr> </table>