Присвоить стиль каждому последующему элементу
 

Приветствую гуру JS! К вам небольшой вопрос..
Имею:

<div id="mi-slider" class="mi-slider"><ul>
            <li><a href="#"><img src="#"></a></li>
            <li><a href="#"><img src="#"></a></li>
            <li><a href="#"><img src="#"></a></li>
          </ul>
          <ul>
            <li><a href="#"><img src="#"></a></li>
            <li><a href="#"><img src="#"></a></li>
            <li><a href="#"><img src="#"></a></li>
          </ul>
          <ul>
            <li><a href="#"><img src="#"></a></li>
            <li><a href="#"><img src="#"></a></li>
            <li><a href="#"><img src="#"></a></li>
          </ul>
          <ul>
            <li><a href="#"><img src="#"></a></li>
            <li><a href="#"><img src="#"></a></li>
            <li><a href="#"><img src="#"></a></li>
          </ul></div>

Таких Групп UL может быть любое количество, а в них моет быть любое количество LI..

Мне необходимо в каждой группе UL задать стиль для каждого LI, что бы в каждой группе UL у каждого LI был z-index на 1 меньше предыдущего, а left и top увеличивался на 50

Делаю вот так:

<script type="text/javascript">
  $('.mi-slider  ul li').each(function(i, el) {
$(function() { $(el).css('z-index', "99" - i); }, i );
$(function() { $(el).css('left',  i * 50); }, i );
$(function() { $(el).css('top',  i * 50); }, i );
});
</script>

Но у меня для абсолютно всех LI в блоке .mi-slider меняется значение...
т.е. я получаю:

<div id="mi-slider" class="mi-slider"><ul>
            <li style="z-index: 99; left: 0px; top: 0px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 98; left: 50px; top: 50px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 97; left: 100px; top: 100px;"><a href="#"><img src="#"></a></li>
          </ul>
          <ul>
            <li style="z-index: 96; left: 150px; top: 150px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 95; left: 200px; top: 200px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 94; left: 250px; top: 250px;"><a href="#"><img src="#"></a></li>
          </ul>
          </div>

и т.д.

А нужно:

<div id="mi-slider" class="mi-slider"><ul>
            <li style="z-index: 99; left: 0px; top: 0px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 98; left: 50px; top: 50px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 97; left: 100px; top: 100px;"><a href="#"><img src="#"></a></li>
          </ul>
          <ul>
            <li style="z-index: 99; left: 0px; top: 0px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 98; left: 50px; top: 50px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 97; left: 100px; top: 100px;"><a href="#"><img src="#"></a></li>
          </ul>
<ul>
            <li style="z-index: 99; left: 0px; top: 0px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 98; left: 50px; top: 50px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 97; left: 100px; top: 100px;"><a href="#"><img src="#"></a></li>
          </ul>
<ul>
            <li style="z-index: 99; left: 0px; top: 0px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 98; left: 50px; top: 50px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 97; left: 100px; top: 100px;"><a href="#"><img src="#"></a></li>
          </ul>
          </div>

и т.д.

Подскажите плиз, как решить задачу?

firsmember,

$(function() {
            $('.mi-slider  ul').each(function(i, ul) {
                $('li', ul).each(function(i, li) {
                    $(li).css({
                        'z-index': 99 - i,
                        'left': i * 50,
                        'top': i * 50
                    })
                })
            });
        });