Looping through elements and adding a decreasing z-index
<p>I'm trying to stack a group of elements in decreasing order with z-index.</p>

<p>So for a collection of three li elements they would look like:</p>

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

<p>So far i've found the method explained here <a href="http://stackoverflow.com/questions/5787693/">Looping through a collection of li elements adding a z-index and incrementing value on each</a>
seems very close:</p>

<pre class="lang-js prettyprint-override"><code>$('#contentSlider ul li').each(function(i, el) {
   $(el).css('z-index', i + 1);
});
</code></pre>

<p>And at this stage im guessing i can use <code>$("#contentSlider ul li").length;</code> in some way to count down with <code>('z-index', i - 1);</code> but beyond that I'm stuck.</p>
