[英]jQuery iterate through elements
我有以下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
的元素的值的SUM的最佳方法是什么?
请注意,我担心性能。 我的实际HTML有点复杂(有时我有数千个元素)。 我尝试使用.each()
但有时我的浏览器卡住了。 因此,问题可以修改为“迭代元素获取某些数据的最佳方法是什么?”
我的尝试:
var total = 0;
$(".input_price").each(function(){
total+=parseFloat($(this).val());
});
仅仅因为您关心性能,使用纯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);
在jQuery中,您可以直接执行此操作:
var sum = 0;
$('.input_price').each(function(){
var value = parseFloat(this.value);
if(!isNaN(value)) sum += value;
});
您也可以使用计时器进行异步循环 。 它需要更长时间但不会冻结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);
});
var sum = 0;
$('.input_price').each(function(){
sum += parseFloat(this.value);
});
$('.input_price').each(function(){
sum += parseFloat($(this).val());
});
将所有元素与类汇总为input_price,
var elements = document.getElementsByClassName("input_price");
var sum = 0;
for(var i=0; i<elements.length; i++) {
sum += parseFloat(elements[i].value);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.