Question

我已经到处检查过寻找解决方案，并且无法弄明白。解决方案使我望而却步。

由于复杂的原因，我不能简单地更改CSS中的边距/填充交换，因此我尝试在第一个div中添加style="z-index:5;"，然后在第二个div中添加style="z-index:4;"，等等，以便页面上的最后一个元素具有最低的z-index，并且每个元素朝向顶部添加一个，因此如果存在任何重叠，它总是保持在顶部，这是当前位于下面的一些链接的情况随后的兄弟元素。

下面的示例代码：我知道我的计数器正在运行，但增量器（z）的值没有传递给for循环中的.css方法。有什么建议吗？

<style>
.subsection {
    margin-top: -80px;
    padding-top: 80px;
    position: relative;
}
</style>

<script>
    var set_zindex = function(){
        var subsection = $('.subsection');
    var subsections = subsection.length;
    var z;
    for ( z=subsections; z >=0; z-- ) {
        subsection.css('z-index', z );
    }
}
set_zindex();
</script>

<html>
<div class="subsection">some content</div>  //add style="z-index:5:
<div class="subsection">some content</div>  //add style="z-index:4:
<div class="subsection">some content</div>  //add style="z-index:3:
<div class="subsection">some content</div>  //add style="z-index:2:
<div class="subsection">some content</div>  //add style="z-index:1:
</html>

Answer 1

您正在使用jQuery集合（var子部分）。您需要单独检查该集合中的每个项目。

类似的东西：

subsection.each(function(i){
  $(this).css('z-index', subsection.length-i);
});

Answer 2

你应该在for循环中使用z - = 1。否则，事情会变得棘手。见here

并与每个人一起迭代。

subsection.each
  (
    function(i) {
         $(this).css('z-index',subsections-i);
    } 
  )
;

增量倒计时以更改同级元素的z-index值

2 个答案: