Question

我有以下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());    
});

Answer 1

仅仅因为您关心性能，使用纯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);

Answer 2

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

var sum = 0;

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

您也可以asynchronous looping using timers。 需要更长时间但不会冻结UI线程，因此您不会卡住。这里是a demo ，它总结了一个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);
});

Answer 3

var sum = 0;

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

Answer 4

$('.input_price').each(function(){
    sum += parseFloat($(this).val());
});

Answer 5

将所有元素与类汇总为input_price，

var elements = document.getElementsByClassName("input_price");
var sum = 0;
for(var i=0; i<elements.length; i++) {
    sum += parseFloat(elements[i].value);
}

jQuery迭代元素

5 个答案: