jQuery迭代元素

Question

I have the following 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>

What is the best way to get the SUM of values of the elements having class input_price ?

Please note that I am concerned about the performance. My actual HTML is bit more complex (sometimes I have thousands of elements). I tried using .each() but sometimes my browser gets stuck. So that the question can be modified to "What is the best way to iterate through elements TO GET some data?"

My try:

var total = 0;

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

Answer 1

Just because you care about performance, use pure JavaScript and a single for loop:

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

In jQuery, you could do this straight:

var sum = 0;

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

You could also do asynchronous looping using timers . It will take longer but will not freeze the UI thread so you won't get stuck. Here's a demo where it sums up an array of 1's until 1000, but won't freeze the browser.

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

Summing all elements with classes as input_price,

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