用累加器遍历jQuery对象？

Question

I'm iterating over a collection of objects with $.each and appending a pre-defined attribute of each of them to the page. This works just fine.

$(myObjects).each(function(i) {
    var element = $("<tr>").appendTo(tableBody);
    $("<td>").append(this.unitCount).appendTo(element);
});

The value that I am appending is a number. I'd like to keep track of these values in an accumulator and return the total to use elsewhere. Like this:

var total = 0;
$(myObjects).each(function(i) {
    var element = $("<tr>").appendTo(tableBody);
    $("<td>").append(this.unitCount).appendTo(element);
    var total = total + this.unitCount;
});

The problem is that since $(myObjects) is a collection of objects the accumulator variable total isn't recognized inside the loop. (When I call console.log(total) right after the loop is started the value inside recognized). I'd like to use one loop to append the value to the page as well as keep track of the total. Is this possible?

Answer 1

It's quite slow to create elements inside an each or for loop, instead construct a HTML string representation. Append it once you're done with your data-loop:

jsBin demo

var TR = "";
var total = 0;

$.each(myObjects, function() {
   var uc = this.unitCount;
   TR += "<tr><td>"+ uc +"</td></tr>";
   total += uc;
});

tableBody.append(TR).append("<tr><td>TOTAL: "+ total +"</td></td>");