jQuery迭代元素

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>

获得具有类的元素的值的SUM的最佳方法是什么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);