I have to increase the z-index by 1, of all span with class .page. There can be more than 100 matched elements (NOT more than 150 in any case). Right now I am iterating through each one of them and changing the z-index via following code.

  $('#mydiv span.page').each(function() {
    var zi = parseInt($(this).css('z-index')) + 1;
    $(this).css('z-index', zi);
  });

Is there a better way to deal with it for better performance. I am using jQuery.

I have to increase the z-index by 1, of all span with class .page. There can be more than 100 matched elements (NOT more than 150 in any case). Right now I am iterating through each one of them and changing the z-index via following code.

  $('#mydiv span.page').each(function() {
    var zi = parseInt($(this).css('z-index')) + 1;
    $(this).css('z-index', zi);
  });

Is there a better way to deal with it for better performance. I am using jQuery.

• javascript
• jquery
• performance
• dom

• 1 did you know that you can emulate zIndex effects just by reordering elements? The last element (of a group with the same zIndex) appears topmost. This is how jQuery UI handles draggable stacking these days. – Alnitak Commented Sep 9, 2013 at 6:58
• @Alnitak You are right. But I need a kind of stack of all elements one above another for some animation effect. That is why I did not go with this solution. BTW! thanks for bringing out the point. – ʞɹᴉʞ ǝʌɐp Commented Sep 9, 2013 at 7:03
• 1 they'll all get stacked in DOM order (my point about the last element was just an example) – Alnitak Commented Sep 9, 2013 at 7:04

3 Answers 3

Some tricky way is,

Create new style

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { z-index: value; }';
document.getElementsByTagName('head')[0].appendChild(style);

document.getElementById('yourElementId').className = 'cssClass';

The best way would be to rewrite your logic not to depend on a uniform incremental z-index in the element styling. If you are only ever running this logic once, perhaps you can set up some general CSS rules that just involve toggling a class to achieve the layout you want. Assuming that is not an option, there isn't much you can do to make it more performant.

You may be able to detach the '#mydiv' element temporarily to reduce page repainting but it is hard to give more help without more info, and that can confuse other things.

var div = $('#mydiv');
var prev = div.prev();
div.detach();

// You can clean up your jQuery like this:
div.find('span.page').css('z-index', function(index, zIndex) {
    return parseInt(zIndex, 10) + 1;
});

div.insertAfter(prev);

In terms of performance, @Jaykishan Mehta's one is the best, then es the for-loop.

for (var i = 0, spans = document.querySelectorAll('#mydiv span.page'), len = spans.length; i < len; i += 1) {
    spans[i].style.zIndex = parseInt(spans[i].style.zIndex, 10) + 1;
}

Using jQuery massively, i.e for each iteration etc., can slow down globally.

What I mean is that jQuery may do separate tasks quite quickly, but the sum might cause a general slowdown.

It all depends on your app/website.