Question

I’m trying to stack a group of elements in decreasing order with z-index.

So for a collection of three li elements they would look like:

<li style="z-index:3"></li>
<li style="z-index:2"></li>
<li style="z-index:1"></li>

So far i’ve found the method explained here Looping through a collection of li elements adding a z-index and incrementing value on each
seems very close:

$('#contentSlider ul li').each(function(i, el) {
   $(el).css('z-index', i + 1);
});

And at this stage im guessing i can use $("#contentSlider ul li").length; in some way to count down with ('z-index', i - 1); but beyond that I’m stuck.

Answer 1

You seem to know how to do it already… Maybe this is what you want?

var lis = $('#contentSlider ul li');
lis.each(function(i, el){
   $(el).css('z-index', lis.length-i);
});