Sum using jQuery each function without global variable

Question

I want to add some HTML elements that have the same class name.

So, the code will be like this with jQuery.

$(".force").each(function (){
    a += parseInt( $(this).html());
});
$("#total_forces").html(a);

In this code, the variable has to be global.

Is there any other elegant way to sum every .force value and get the sum out of the each function without global variable?

Answer 1

If you don't want to introduce a global variable, you could use something like this:

$("#total_forces").html(function() {
    var a = 0;
    $(".force").each(function() {
        a += parseInt($(this).html());
    });
    return a;
});

Answer 2

For convenience, if you're going to be needing this same functionality frequently, I'd probably just make a plugin.

Example: https://jsfiddle.net/tzw4mkL2/

(function( $ ) {
    $.fn.sumHTML = function() {
       var sum = 0;
        this.each(function() {
           var num = parseInt( $(this).html(), 10 );
           sum += (num || 0);
        });
       return sum; 
    };
})( jQuery );

...which would be used like this:

$('#total_forces').html( $('.force').sumHTML() );

---

EDIT: Changed to guard agains NaN as noted by @Šime Vidas. Also ensured base-10 in the parseInt() and fixed a closing } that was missing.

Answer 3

In short, no.

Why does a have to be global? It doesn't have to be global.

function aFunc() {
    var a = 0;

    $(".force").each(function (){
        a += parseInt( $(this).html());
    });

    return a;
}

$("#total_forces").html(aFunc());

Which, can be simplified to:

$("#total_forces").html(function() {
    var a = 0;

    $(".force").each(function (){
        a += parseInt( $(this).html());
    });

    return a;
});

Here a is local to aFunc, and is just one of millions of examples of it not being in the global scope.

Answer 4

Don't want a global?

(function() {
    var a = 0;
    $('.force').each(function (){
        a += parseInt($(this).text());
    });
    $('#total_forces').text(a);
})();

Answer 5

You can use $(".force").length, it returns the number of elements in the jQuery object.

jQuery API