来自同一类的不同 div 的值的总和答案

【问题标题】：Sum of values from different divs with the same class来自同一类的不同 div 的值的总和
【发布时间】：2011-11-07 03:56:09
【问题描述】：

我正在动态加载具有.totalprice 类的 div。最后，我想对所有.totalprice 的值求和。

【问题讨论】：

你能给我们看看 DOM 吗？

标签： jquery

【解决方案1】：

对于<div> 元素：

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

你可以看到working example of this here

对于<input> 元素（输入、复选框等）：

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

或者，如果您要查找整数，可以使用parseInt() 函数。

你可以see a working example of this here。

【讨论】：

this.value，请为速度，var 为功能。
@lonesomeday - 最初的 var 是一个错字，根据您的要求添加了 this.value。
如果是div，那么你需要使用this.innerText或者this.innerHTML :)
this.value 仅适用于表单元素，不适用于指定问题的 DIV。
为表单元素和 Div 添加了一个演示。 :)

【解决方案2】：

在 Rionmonster 的基础上再接再厉，这对我有用：

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/

【讨论】：

【解决方案3】：

除非您绝对确定您的内容的价值，否则您将无法立即使用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/

【讨论】：

【解决方案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;
}

请记住，这两个函数都使用了我命名的变量但该函数的目的是返回属于同一类的元素的值的总和。

【讨论】：

【解决方案5】：

(function( $ ){
   $.fn.sum=function () {
    var sum=0;
        $(this).each(function(index, element){
            if($(element).val()!="")
            sum += parseFloat($(element).val());
        });
    return sum;
    }; 
})( jQuery );
alert($('.abcd').sum());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='abcd' value='1'>
<input type='text' class='abcd' value='5'>

More JQUERY Codes

【讨论】：

请添加一些信息，说明您的答案为何正确或与其他答案有何不同

【解决方案6】：

对于非输入元素：

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

对于输入元素：

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

【讨论】：

【解决方案7】：

这将适用于纯香草 JS

            <input type="text" value=" " class="percent-input"> <br>
            <input type="text" value=" " class="percent-input"> <br>
            <input type="text" value=" " class="percent-input"> <br>
            <p>Total Value :<span id="total">100%</span></p>
            <p>Left Value :<span id="left">0.00%</span></p>


var percenInput = document.querySelectorAll('.percent-input');
for (let i = 0; i < percenInput.length; i++) {
    percenInput[i].addEventListener('keyup', getPercentVal)
}

function getPercentVal() {
    var total = 0;
    var allPercentVal = document.querySelectorAll('.percent-input');
    for (var i = 0; i < allPercentVal.length; i++) {
        if (allPercentVal[i].value > 0) {
            var ele = allPercentVal[i];
            total += parseFloat(ele.value);
        }
    }
    document.getElementById("total").innerHTML = total.toFixed(2) + '%';
    document.getElementById("left").innerHTML = (100 - total).toFixed(2) + '%';
}

【讨论】：