Сумма значений из разных div с тем же классом

Ответ 1

Для <div> Элементы:

var sum = 0;
$('.totalprice').each(function(){
    sum += parseFloat($(this).text());  // Or this.innerHTML, this.innerText
});

Вы можете увидеть рабочий пример этого здесь

Для <input> Элементы (входы, флажки и т.д.):

var sum = 0;
$('.totalprice').each(function(){
    sum += parseFloat(this.value);
});

В качестве альтернативы, если вы ищете целое число, вы можете использовать функцию parseInt().

Вы можете увидеть рабочий пример этого здесь.

Ответ 2

Если вы не уверены в ценности своего контента, вы не сможете использовать parseFloat из коробки.

Вы должны быть уверены:

• Чрезмерное пустое пространство
• Ведущие $
• Пробелы
• Неожиданные строки

Посмотрите:

<div class="totalprice">  $1.25 </div>
<div class="totalprice">0.25     </div>
<div class="totalprice">$3.00 </div>
<div class="totalprice">  2.50</div>
<div class="totalprice">$0.01</div>
<div class="totalprice">  </div>

Ниже перечислены все случаи:

var sum = 0;

$(".totalprice").each(function() {
    var val = $.trim( $(this).text() );

    if ( val ) {
        val = parseFloat( val.replace( /^\$/, "" ) );

        sum += !isNaN( val ) ? val : 0;
    }
});

console.log( sum );

Смотрите также: http://jsfiddle.net/rwaldron/hfA5V/

Ответ 3

Чтобы опираться на то, что сделал Рионмонстер, это работает для меня:

HTML:

<div class="totalprice">6.7</div>
<div class="totalprice">8.9</div>
<div class="totalprice">4.5</div>

JavaScript:

var sum = 0;
$('.totalprice').each(function()
{
    sum += parseFloat($(this).text());
});
alert(sum);

Вывод:

21.1

Я нахожу, что при получении значения из <div> вам нужно использовать селектор .text(). Вот скрипка, чтобы увидеть, как она работает: http://jsfiddle.net/davecoulter/7D7nR/

Ответ 4

Если вы делаете это очень часто во всем своем коде, рекомендуется поместить его в хорошую функцию повторного использования.

function removeComma(x)
{
   if (x) 
   {
       if (x.length > 0) 
       {
        return x.replace(/,/g,'');
       }
   }
}
function sum_class(list,source)
{
    // source can be text for non input DOM elements or value for text inputs
    var total = 0;
    $(list).each(function() {
    if (source == 'text') 
    {
         total += parseFloat(removeComma($(this).text()));
    }
    else
    {
         total += parseFloat(removeComma($(this).val()));
        }
    }); 
    return total;
}

Имейте в виду, что обе функции используют переменные, которые я называю тем, что имеет смысл для меня, вы можете переименовать их в то, что вы понимаете, работает лучше для вас, например имя функции sum_class, не относится к классу ООП но цель функции, которая заключается в том, чтобы вернуть общее количество значений из элементов, принадлежащих одному классу.