Looping through a collection of li elements adding a z-index and incrementing value on each
<p>I'm trying to do what I thought would be a simple task of checking a content slider div looking for the li elements, and adding a z-index to to each one, incrementing the value by one each time. </p>

<p>So for a collection of three li elements they would be assigned:</p>

<p><code>&lt;li style="z-index:1"&gt;&lt;/li&gt;
 &lt;li style="z-index:2"&gt;&lt;/li&gt;
 &lt;li style="z-index:3"&gt;&lt;/li&gt;</code></p>

<p>I have tried doing this by using the following code:</p>

<pre><code>  var $lis = $('#contentSlider ul li');

                  for(var i = 0; i &lt; $lis.length; ++i){

                      $lis:eq(1).css('z-index',1);              
                  }
</code></pre>

<p>And also tried using:</p>

<pre><code>var $lis = $('#contentSlider ul li');

                  for(var i = 0; i &lt; $lis.length; ++i){


                    $('li').index($lis); 

                  }
</code></pre>

<p>Any idea how would be best to do this?</p>
