除第一个元素外，所有具有类的元素的值之和

Question

I'm using a bootstrap table to display a bunch of data and would like to sum up a column after the data has been loaded with JSON. I'd like to do the summing with Javascript so that the values will update when I apply filters to the table (See the filter extension here for an example http://wenzhixin.net.cn/p/bootstrap-table/docs/extensions.html . I'm currently trying to do this with the jQuery each() function by selecting a class that has been applied to every cell in a column, getting the value from each element and summing it into a variable.

Has anyone done this before with bootstrap tables?

Here is what I currently have (This is returning NaN in the end):

function sum_revenue() {

    var sum = 0;

    // remove class from column header because it does not contain numbers
    $('.revenue').first().removeClass('revenue');

    $('.revenue').each(function(){

        sum += parseInt($(this).val());

    });

    console.log(sum);

}

Answer 1

This works --

var sum = 0;

    // remove class from column header because it does not contain numbers
    $('.revenue').first().removeClass('revenue');


    $('.revenue').each(function(){
        sum += parseFloat($(this).text()); 
    });

    console.log("$" + sum);

Answer 2

You have an issue with execution order. JS will run those two block simultaneously. You can do this synchronously as follows:

var sum = 0;
$('.revenue').each(function(index, value) {
    //Remove the first "header element from sum
    if(index !== 0) {
        sum += parseInt($(this).html(), 10);
    }
    //Remove the class if you still need to
    else {
        $(this).removeClass('revenue');
    }
});

console.log(sum);

Here is a fiddle: http://jsfiddle.net/a14rva0m/2/

Or you could do this with some crazy callback magic.

Answer 3

You can use .not to filter out the first element:

var sum = 0;

$('.revenue').not(':first').each(function(){
    sum += parseInt($(this).val());
});