3

我有以下 HTML。

<div id="price_list">
 <input type="text" value="100" class="input_price" />
 <input type="text" value="256" class="input_price" />
 <input type="text" value="500" class="input_price" />
 <input type="text" value="04.26" class="input_price" />
 <input type="text" value="156" class="input_price" />
 <input type="text" value="052" class="input_price" />
 <input type="text" value="692" class="input_price" />
 <input type="text" value="25.36" class="input_price" />
 <input type="text" value="10.56" class="input_price" />
</div>

获得具有类的元素的值总和的最佳方法是什么input_price？

请注意，我担心性能。我的实际 HTML 有点复杂（有时我有数千个元素）。我尝试使用.each()，但有时我的浏览器卡住了。这样可以将问题修改为“迭代元素以获取一些数据的最佳方法是什么？”

我的尝试：

var total = 0;

$(".input_price").each(function(){
  total+=parseFloat($(this).val());    
});
4

5 回答 5

5

仅仅因为您关心性能，请使用纯 JavaScript 和单个for循环：

var list = document.getElementById("price_list"),
    inputs = list.getElementsByTagName("input"),
    total = 0;

for (var i = 0, len = inputs.length; i < len; i++) {
    total += +inputs[i].value;
}

console.log(total);
于 2013-05-17T12:29:14.370 回答
3

在 jQuery 中，您可以直接执行此操作：

var sum = 0;

$('.input_price').each(function(){
  var value = parseFloat(this.value);
  if(!isNaN(value)) sum += value;
});

您还可以使用 timers 进行异步循环。这将花费更长的时间，但不会冻结 UI 线程，因此您不会被卡住。这是一个演示，它总结了一个 1 的数组直到 1000，但不会冻结浏览器。

function loop(object,callback){
  var i = 0;
  var sum = 0;

  var timer = setInterval(function(){

    //get value and add
    var value = parseFloat(object[i].value);
    if(!isNaN(value)) sum += value;

    //if we reach the length, clear the timer and call the callback
    if(++i === object.length){
      clearInterval(timer);
      callback(sum);
    }
  },0);
}

loop($('.input_price'),function(sum){
  console.log(sum);
});
于 2013-05-17T12:28:51.750 回答
0 
var sum = 0;

$('.input_price').each(function(){
    sum += parseFloat(this.value);
});
于 2013-05-17T12:27:43.967 回答
0 
$('.input_price').each(function(){
    sum += parseFloat($(this).val());
});
于 2013-05-17T12:29:28.927 回答
0

将所有元素与类作为 input_price 相加，

var elements = document.getElementsByClassName("input_price");
var sum = 0;
for(var i=0; i<elements.length; i++) {
    sum += parseFloat(elements[i].value);
}
于 2013-05-17T12:53:32.173 回答