Question

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

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

<li style="z-index:1"></li> <li style="z-index:2"></li> <li style="z-index:3"></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方法提供了一个函数。对于选择中的每个元素，此函数运行一次。每次调用它时，都会将元素在选择（索引）中的位置作为第一个参数传递，将元素本身作为第二个参数传递。我们需要将1添加到i，因为它是0索引的。

Answer 2

你可以这样做

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

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

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

2 个答案: