循环遍历li元素的集合，在每个元素上添加z-index和递增值

我正在尝试做我认为是一个简单的任务，检查内容滑块div寻找li元素，并为每个元素添加一个z-index，每次递增一个值。

因此，对于三个li元素的集合，它们将被分配：

我尝试使用以下代码执行此操作：

  var $lis = $('#contentSlider ul li'); for(var i = 0; i < $lis.length; ++i){ $lis:eq(1).css('z-index',1); } 

并尝试使用：

 var $lis = $('#contentSlider ul li'); for(var i = 0; i < $lis.length; ++i){ $('li').index($lis); } 

知道如何做到这一点最好吗？

Answer 1

你需要each方法：

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

您为each方法提供了一个函数。 对于选择中的每个元素，此函数运行一次。 每次调用它时，都会将元素在选择（索引）中的位置作为第一个参数传递，将元素本身作为第二个参数传递。 我们需要向i添加1 ，因为它是0索引的。

Answer 2

你可以这样做

 $('#contentSlider li').each(function(index) { $(this).css('z-index', index); }); 

演示： http ： //jsfiddle.net/ynhat/zgYWK/