Jquery - Adding all numbers inside span of a particular class

Question

im scratching my head with this one, I can do the usual contents of div + contents of another div addition in jquery, but im not sure how I go about adding together the contents of all instances of a particular span on a page. Basically I can a page that pulls info into it using jquery and ajax, it pulls in invoices for the month selected and displays them in each row. What I want to do is add off the the rows together with the class 'grandtotal', so I can display the monthly invoice total for all the invoices for that month, but im not sure how to add 'grandtotal' + 'grandtotal' etc when I dont know how many instances of that span are going to be generated each time, I somehow need to take the number from each instance of 'grandtotal' currently on the page and then display it in a div 'monthlytotal' . This is the code that pulls each invoice row from the ajax.

 $.getJSON('select.php', {monthyear: $(this).val()}, function(data){
                var invoicerow = '';
                for (var x = 0; x < data.length; x++) {
                    if (data[x]['datepaid'] == '0000-00-00'){datepaid = '<span style="color:red;">Not Paid</span>'}else{datepaid = data[x]['datepaid']};
                    invoicerow += '<tr><td>' + data[x]['invoiceID'] + '</td><td>' + data[x]['customerID'] + '</td><td>' + data[x]['date'] + '</td><td>£' + '<span class="grandtotal">' + data[x]['grandtotal'] + '</span>' + '</td><td>' + '<a target="_NEW" href="../salesmanager/viewinvoice.php?&salesID=' + data[x]['salesID'] + '">View Invoice</a></td><td>' + datepaid + '</td></tr>';
                }
                $('#summarycontent').html(invoicerow);
              $("select").select2();

EDIT >>>>>

Ok so I am here so far, this works, but the problem is its multiplying the previous month.....so when the page loads with the select box it says Total: , when its first pressed and say select Januaury it says £0 , then select feb and you get £1860 , but the thing is thats Januarys total and not Feb's , febs total is £0 , so its as though the result is one behind all the time.

<script>
                    $(document).ready(function(){
    $('#selectmonth').on('change', function (){
                        var sum = 0;
$('.grandtotal').each(function(){
 sum += parseFloat($(this).text());
});
$('#total_price').text('£' + sum);
        });   
            });
</script>

I have found this var myVar = $("#start").find('.myClass').val(); which would if re written probably find the classes on the page, but im not sure how to then add all of them together when they are all called the same thing, as its not as easy as it is with div1 + div2 — Iain Simpson, Jan 13 '15 at 15:58

score 0 · Accepted Answer · answered Jan 15 '15 at 10:12

Ok this seems to work :

<script>
                    $(document).ready(function(){
    $('#invoices').bind('DOMNodeInserted DOMNodeRemoved', function() {
                        var sum = 0;
$('.grandtotal').each(function(){
var tal = $(this).text();
if(isNaN(tal)) {
sum += 0;
}else{
sum += parseFloat($(this).text());};
});
 $('#total_price').text('£' + sum);
        });   
            });
</script>

Jquery - Adding all numbers inside span of a particular class

1 Answers1

Linked