使用 jQuery 级联 z-index

Question

所以我有一个这样的列表；

<ul>
  <li>Sausage</li>
  <li>Egg</li>
  <li>Parsnip</li>
  <li>Sarsaparilla</li>
  <li>Burger</li>
  <li>Cilantro</li>
</ul>

我需要将“级联z-index”动态添加到特定的li，这样我就可以指定li 排在最前面，而所有其他lis 会逐渐减少。

例如，如果我有一个 jQuery click() 事件绑定到一个函数，该函数将按照我想要的方式动态计算 z-indexes，然后我单击“Parsnip”，列表现在看起来像这样；

<ul>
  <li style="z-index: 2;">Sausage</li>
  <li style="z-index: 3;">Egg</li>
  <li style="z-index: 4;">Parsnip</li>
  <li style="z-index: 3;">Sarsaparilla</li>
  <li style="z-index: 2;">Burger</li>
  <li style="z-index: 1;">Cilantro</li>
</ul>

点击“Cilantro”会使列表看起来像这样；

<ul>
  <li style="z-index: 1;">Sausage</li>
  <li style="z-index: 2;">Egg</li>
  <li style="z-index: 3;">Parsnip</li>
  <li style="z-index: 4;">Sarsaparilla</li>
  <li style="z-index: 5;">Burger</li>
  <li style="z-index: 6;">Cilantro</li>
</ul>

换句话说，被点击的li 将有最高的z-index 需要带到前面（需要计算，因为lis 的数量可以是任何值），它的直接兄弟姐妹将有一个更低，他们的兄弟姐妹更低，等等。

我怎么可能做到这一点？列表项不一定需要分配与图示完全相同的z-index 数字，只要实现“级联”元素的视觉效果，点击次数最多即可。

Answer 1

怎么样

$('li').click(function(){
    var prev = $(this).prevAll();
    var next = $(this).nextAll();
    var count = prev.length;
    if (next.length > count){
        count = next.length;
    }
    $(this).css({zIndex: count+1});
    prev.each(setIndex);
    next.each(setIndex);
    function setIndex(i){
        $(this).css({zIndex: count-i})
    }
});​

http://jsfiddle.net/UaaNn/