Суммирование с использованием jQuery каждой функции без глобальной переменной

Question

Я хочу добавить несколько элементов HTML с одинаковым именем класса.

Итак, код будет таким же с jQuery.

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

В этом коде переменная должна быть глобальной.

Есть ли другой элегантный способ суммировать каждое значение .force и получать сумму из функции each без глобальной переменной?

Answer 1

Если вы не хотите вводить глобальную переменную, вы можете использовать что-то вроде этого:

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

Answer 2

Для удобства, если вам часто понадобятся те же функции, я бы просто сделал плагин.

Пример: 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 );

... который будет использоваться следующим образом:

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

---

РЕДАКТИРОВАТЬ: Изменен для защиты против NaN, как отмечено @ Šime Vidas.Также обеспечено основание-10 в parseInt() и исправлено закрытие }, которое отсутствовало.

Answer 3

Короче говоря, нет.

Почему a должно быть глобальным? не может быть глобальным.

function aFunc() {
    var a = 0;

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

    return a;
}

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

Что можно упростить до:

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

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

    return a;
});

Здесь a локально для aFuncи является лишь одним из миллионов примеров того, что он не находится в глобальном масштабе.

Answer 4

Не хотите глобальный?

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

Answer 5

Вы можете использовать $ (". Force"). Length, он возвращает количество элементов в объекте jQuery.

jQuery API