jquery - More efficient way to update multiple elements in javascript? - Stack Overflow

admin管理员组

文章数量:1321058

I have 6 divs with ID"#first, #second ... #sixth.

If I wanted to execute functions on each of these divs, I would set up an array that holding each div name. If I wanted to apply a function, I set up a for loop that iterates through each element in the array and (for example) changes the background color to red:

function updateAllDivsInTheList() {
  for(var i = 0; i < array.size; i++)
    $("#"+array[i]).changeCssFunction();
  }
}

Whenever I create a new div, I would add it to the array.

The issue is, if I have a large number of divs that need to get updated (say 1000 out of 1200 divs), it may be a pain/performance tank to have to sequentially iterate through every single element in the array. Is there some alternative, more efficient way or data structure, of updating multiple divs? Maybe with some other more efficient data structure besides array? Or is what I am doing the most efficient way?

I have 6 divs with ID"#first, #second ... #sixth.

If I wanted to execute functions on each of these divs, I would set up an array that holding each div name. If I wanted to apply a function, I set up a for loop that iterates through each element in the array and (for example) changes the background color to red:

function updateAllDivsInTheList() {
  for(var i = 0; i < array.size; i++)
    $("#"+array[i]).changeCssFunction();
  }
}

Whenever I create a new div, I would add it to the array.

The issue is, if I have a large number of divs that need to get updated (say 1000 out of 1200 divs), it may be a pain/performance tank to have to sequentially iterate through every single element in the array. Is there some alternative, more efficient way or data structure, of updating multiple divs? Maybe with some other more efficient data structure besides array? Or is what I am doing the most efficient way?

• javascript
• jquery

Share Improve this question Follow edited Jun 27, 2012 at 21:28 Rolando asked Jun 27, 2012 at 21:08 RolandoRolando 62.7k104104 gold badges279279 silver badges422422 bronze badges 4

• Why do you have 1200 divs? I would say you got other problems except the hard work with the array. – gdoron Commented Jun 27, 2012 at 21:14
• If you want to iterate over 1200 elements, it might be better to write a specialised function, which does not have the overhead of jQuery / jQuery plugin. – Rob W Commented Jun 27, 2012 at 21:14
• 1 @RobW. I would say: "You don't want to iterate over 1200 elements." – gdoron Commented Jun 27, 2012 at 21:16
• 1 Instead of making CSS changes on a per-element basis, you could instead use smarter CSS rules so that a change to an outer level of the DOM would reflect the changes. It's even possible to construct CSS in JavaScript, which is a little on the crazy side but in some cases it can be the right thing to do. (Of course, the browser internally has to interpret your "class" changes by iterating through the DOM, but browsers nowadays are really good at that.) – Pointy Commented Jun 27, 2012 at 21:18

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

You should be caching your jQuery objects so that your list of names bees a list of jQuery objects. Iterating over an array of 1000 items is fast. Building 1000 new jQuery objects every time is slow.

var names = [ "one", "two", ..., "six" ];

// Turn the array of strings into an array of their corresponding jQuery ele
var $divs = $.map(names, function (v) { return $("#" + v); });

You can also chain multiple ids together into a single selector and avoid the (external) loop; jQuery will (probably) still implement this internally as a loop.

$('#one, #two, #three').changeCssFunction();

Note that updating the DOM a thousand times is going to be slow, more so in some browsers than in others. You might consider rethinking your code so that you're adding or removing a class from some parent object, allowing some new CSS selector to match all child elements with a single DOM update.

A more efficient way might be to not do this on the client side. In Internet Explorer every interaction with the dom (checking css classes, changing css, checking attributes) can cause a dom refresh which leads to "freezing" of the page. If you are still intent on doing it you should give each of those div's a mon classname and use jquery to select on that class name. Then you can iterate through the returned list of jquery objects.

var divs$ = [];
$('div.someClass').each(function(i,e) {
  divs$.push($(e));
});

function updateAllDivsInTheList() {
  for(var i = 0; i < array.size; i++)
    divs$[i].changeCssFunction(); 
  }
}

When invoking a jQuery method, it will internally loop over all matched elements in the set. Therefore, it would be more efficient to build only one jQuery object containing all the elements:

$(array.map(function(id){return "#"+id;}).join(", ")).changeCssFunction();

which would be much easier with a simpler selector, e.g. by using a class. And if you want to use the method more than once, be sure to cache the jQuery object.

If you want a real performance boost, don't use jQuery. You could either apply the style changes directly using native DOM methods (that of course depends on their plexity and cross-browser-safeness), or you could give it a try and manipulate style sheets instead of style attributes on single elements.

本文标签： jqueryMore efficient way to update multiple elements in javascriptStack Overflow