增量倒数改变同胞元素的z-index值 [英] Incremental countdown to change z-index value of sibling elements
问题描述
由于复杂的原因，我不能简单地在CSS中更改边距/填充交换，所以我试图添加 style =z-index：5;在第一个div中，然后在 style =z-index：4;第二个div等等，这样页面上的最后一个元素有最低的z-index，每个向上的元素都加上一个，所以如果有任何重叠，它总是保持在最前面，这是一些链接的情况目前坐在下面的兄弟元素之下。
剥离下面的示例代码：我知道我的计数器正在工作，但增量器（z）的值不传递给for循环中的 .css 方法。有什么建议？
< style>
.subsection {
margin-top：-80px;
padding-top：80px;
position：relative;
}
< / style>
< script>
var set_zindex = function（）{
var subction = $（'。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>一些内容< / div> // add style =z-index：5：
< div class =subsection>某些内容< / div> // add style =z-index：4：
< div class =subsection>一些内容< / div> // add style =z-index：3：
< div class =subsection>某些内容< / div> // add style =z-index：2：
< div class =subsection>一些内容< / div> //添加样式=z-index：1：
< / html>
您正在使用jQuery集合（var subsection），您需要分别浏览该集合中的每个项目。
如：
subsection.each（函数（i）{
$（this）.css（'z-index '，subsection.length-i）;
}）;
I have checked everywhere looking for a solution to this, and have not been able to figure it out. The solution eludes me.
For complicated reasons, I can't simply change the margin/padding swap in CSS, so I'm trying to add style="z-index:5;" in the first div, and then style="z-index:4;" in the second div, etc. so that the last element on the page has the lowest z-index, and each element going toward the top adds one, so it always remains on top if there is any overlap, which is the case with some links that currently sit below the subsequent sibling element.
Stripped down sample code below: I know my counter is working, but the value of the incrementer (z) is not passing to the .css method in the for loop. Any suggestions?
<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>
You are working with a jQuery collection (var subsection). You need to go over each item in that collection separately.
Something like:
subsection.each(function(i){
$(this).css('z-index', subsection.length-i);
});
这篇关于增量倒数改变同胞元素的z-index值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
