Incrementally decrease z-index using jQuery

Question

How would I incrementally decrease the z-index on a set of div elements using jQuery starting with an index of 999.

I have already seen other questions about incrementally decreasing z-index but it doesn't have a starting z-index for the first element. Modified code from that post is below:

$('div.count').each(function(i){
  $(this).css('z-index', $(this).length-i);
});

End result should look like:

<div class="count" style="z-index:999;"></div>
<div class="count" style="z-index:998;"></div>
<div class="count" style="z-index:997;"></div>

@roasted that works, but I was wondering if there was other (better) ways to do this. — Steve, Jun 25 '13 at 19:22

score 2 · Accepted Answer · answered Jun 25 '13 at 19:18

2

Tell it where to start, and subract one on every iteration :

var start = 999;

$('div.count').each(function(i){
  $(this).css('z-index', start--);
});

or use the index

$('div.count').each(function(i){
  $(this).css('z-index', 999 - i);
});

answered Jun 25 '13 at 19:18

adeneo

score 1 · Answer 2 · answered Jun 25 '13 at 19:19

1

That will give you a wring z index.Declare a global variable and decrement in loop.

var subsection = 999;   
$('div.count').each(function(i){
  $(this).css('z-index', subsection --);
});

answered Jun 25 '13 at 19:19

Suresh Atta

Sushanth -- · Answer 3 · 2013-06-25T19:40:34.980

1

You can use the index method..

var count = $('div.count').length; 
$('div.count').each(function(i){
  $(this).css('z-index', count - $('div.count').index(this));
});

or

var count = $('div.count').length; 
$('div.count').each(function(i){
   $(this).css('z-index', count - i);
});

edited Jun 25 '13 at 19:40

answered Jun 25 '13 at 19:19

Sushanth --

score 1 · Answer 4 · answered Jun 25 '13 at 19:21

1

var start = 999;
$('div.count').CSS('z-index', function () {
    return start--;
});

References:

answered Jun 25 '13 at 19:21

David Thomas

score 1 · Answer 5 · answered Jun 25 '13 at 19:21

1

Following Code will work properly:

jQuery('div.count').each(function(i){
  jQuery(this).css('z-index', 999-i);
});

The z-index of first element will be 999 and the 999th will be 0...

answered Jun 25 '13 at 19:21

Atrox111

5 Answers5