Jquery - Adding all numbers inside span of a particular class

问题

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>

回答1:

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>

来源：https://stackoverflow.com/questions/27924431/jquery-adding-all-numbers-inside-span-of-a-particular-class

标签

jquery

ajax

addition