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 +=          


        

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

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

jQuery API

Answer 3

Don't want a global?

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

Answer 4

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 5

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.