循环遍历元素并添加递减的z-index

Question

我正在尝试使用z-index按递减顺序堆叠一组元素。

因此，对于三个li元素的集合，它们看起来像：

<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/