How to automatically assign different Z-Index Values to multiple elements with jQuery

Question

for example i have the markup

<div>
     <img src="#" alt=""/>
     <img src="#" alt=""/>
     <img src="#" alt=""/>
<div>

I want to select $('div img') and then assign each one a z-index value so the first one is 3, second 2, third 1. Is this simple with jQuery?

Thanks

Answer 1

yep, use each function - http://api.jquery.com/each/

Answer 2

This should work, see the demo here by clicking on the preview button.

var total = $('div img').size();

$('div img').each(function(index){
  $(this).css('z-index', total - index);
});

Answer 3

i = 3;

$('div img').each(function()
{
    $(this).css('z-index', i);

    i -= 1;
});