Question

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

Answer 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。

Answer 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/

Answer 3

基于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/

Answer 4

(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

Answer 5

对于非输入元素：

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);

Answer 6

如果你在整个代码中经常这样做，建议把它放在一个很好的可重用函数中

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的名称，并不是指OOP类，但函数的目的是返回属于同一类的元素的值的总和。

Answer 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) + '%';
}

来自具有相同类的不同div的值的总和

7 个答案: