循環遍歷元素並添加一個遞減的z-index

Question

我試圖用z-index以遞減順序堆棧一組元素。

所以三個立元素的集合，他們看起來像：

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

到目前爲止，我已經找到了方法，這裏Looping through a collection of li elements adding a z-index and incrementing value on each 解釋似乎非常接近：

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

而在這個階段即時猜測我可以使用$("#contentSlider ul li").length;以某種方式倒計時('z-index', i - 1);但除此之外，我卡住了。

Answer 1

你似乎知道如何做到這一點......也許這就是你想要的？

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

Answer 2

你的猜測是絕對正確的。你可以這樣做：

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

這裏是一個工作示例：http://jsfiddle.net/HVs6N/