jquery - 逻辑上降低 z 索引

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 索引吗？目前打印没有 z-index 的链接，因此它们看起来很糟糕。

我想要它的外观:

目前的样子:

CSS

CSS 中唯一真正的关键因素是位置和 margin-left，但这里是完整的:)

#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。