Apply z-index, going down to li using jQuery

Question

I need to count li and then add the z-index in reverse order to look like this:

<li style="z-index:3;"></li> <li style="z-index:2;"></li> <li style="z-index:1;"></li> 

I don't want 0 or negatives for any z-indices, and this should be in reverse order. I would like to use jQuery since I will not know how many li will be in this list.

Here is what I still have:

  var numIndex = $("ul.progress li").length + 1; $("ul.progress li").each( function(numIndex) { $(this).css("z-index", numIndex*-1); }); 

Please let me know if you know what I am missing.

Answer 1

Do you know what to pass to the .css() callback argument ?

 var c = $('#list li').length; $('#list li').css('z-index', function(i) { return c - i; }); 

http://jsfiddle.net/mblase75/XuSX8/

Answer 2

Try something like this:

 $(function(){ var numIndex = $("ul.progress li").length; $("ul.progress li").each(function(i){ $(this).css("z-index", numIndex-i); }); }); 

DEMO: http://jsfiddle.net/dirtyd77/F39WC/

Answer 3

You must take out the .each() param parameter:

 var numIndex = $("ul.progress li").length; $("ul.progress li").each(function () { $(this).css("z-index", numIndex--); });