jquery - z-index を論理的に降順

Question

<div id="crumbs">

<a href="#" style="z-index: 4;">Workplace Standards</a> &#62;
<a href="#" style="z-index: 3;">Resources</a> &#62;
<a href="#" style="z-index: 2;">Guides</a> &#62;
<a href="#" style="z-index: 1;">Public holidays</a>

</div>

簡単なブレッドクラム ナビゲーションがあります。JQuery は、上記のコードのように、div 内の各リンクに降順の z-index を割り当てることができますか? 現在、リンクは z-index なしで印刷されるため、見栄えが悪くなります。

どのように見せたいか：

現在の外観:

CSS

CSS の真のキー プレイヤーは位置と左マージンだけですが、ここではその全体を示します :)

#crumbs a {
    display: inline-block;
    position: relative;
    padding: .5em 1em;
    background: #e3e3e3;
    border: 1px solid #c9c9c9;
    box-shadow: inset 0px 1px 0px #f6f6f6;
    border-radius: 1em 2em 2em 1em;
    margin-left: -.6em;
}

Answer 1

次のように実行できます。

$($('#crumbs > a').get().reverse()).css('z-index', function(index) {
    return index+1;
});

または、次のようにループしたい場合.each():

$($('#crumbs > a').get().reverse()).each(function(index) {
    $(this).css('z-index', index+1);
});​​

これが機能するには、a要素にposition: relative.

Answer 2

ステータスの更新：CSSとJavaScriptが無効になっている   場合、適切なフォールバックがbreadcrumbs発生します。

参照：   jsFiddle

CSSとJavaScriptが有効になっているスクリーンショット：

CSSとJavaScriptを無効にしたスクリーンショット：

        

追加：CSS3バージョンが受け入れられる場合、私はこのSOAnswerでArrowsを使用したバージョンを作成するように促されました。

---

編集：

サイモンサリスによる代替スタイルの追加のjsFiddle。

Answer 3

z-indexを配置しないとほとんど役に立たない

<div id="crumbs">

    <a href="#" style="position:relative;z-index: 4;">Workplace Standards</a> &#62;
    <a href="#" style="position:relative;z-index: 3;">Resources</a> &#62;
    <a href="#" style="position:relative;z-index: 2;">Guides</a> &#62;
    <a href="#" style="position:relative;z-index: 1;">Public holidays</a>

</div>

例

MDN