CODEWITHSUNDEEP
jquery
Treb
Treb

Reputation: 395

Looping through elements and adding a decreasing z-index

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.

Upvotes: 2

Views: 657

Answers (2)

aroth
aroth

Reputation: 54836

Your guess is absolutely correct. You can do:

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

Here is a working example: http://jsfiddle.net/HVs6N/

Upvotes: 0

Paul
Paul

Reputation: 141877

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);
});

Upvotes: 3

Related Questions