通過li元素的集合來添加一個z-index並在每個元素上增加值

Question

我試圖做我認爲會是一個簡單的任務，檢查內容滑塊div查找li元素，並添加一個z - 指向每一個，每增加一個值。

所以三個立元素的集合，他們將被分配：

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

        } 

任何想法怎麼會是bes要做到這一點？

Answer 1

您需要each方法：

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

您提供給each方法的功能。該功能對選中的每個元素運行一次。每次調用它時，都會將元素在selection（index）中的位置作爲第一個參數傳遞，而將元素本身作爲第二個參數傳遞。我們需要將1添加到i，因爲它是0索引的。

Answer 2

你可以簡單地這樣

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

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