級聯Z指數與jQuery

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 s到是遞減的背後。例如，如果我有一個jQuery click()事件綁定到一個函數，該函數將以我想要的方式動態計算z-index，並且我單擊了「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需要讓前（會需要計算，爲li S中的數量可以是任何東西），它的直接的兄弟姐妹將有一個較低的，他們的兄弟姐妹還有一個等等。等等。

我該怎麼做到這一點？只要實現了點擊最高的「層疊」元素的視覺效果，則列表項不一定需要被分配與圖示完全相同的數字。

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/