我有一堆 DIV 共享同一个类名。我需要动态地为每个 div 应用 z-index。z-index: 1 应该用于第一个 div,z-index: 2 用于第二个 div,依此类推,但不知何故我的脚本无法按预期工作!
$(".siblingsDiv").each(function() {
for( var i=0; i<9; i++) {
$(this).css('z-index', i)
}
})
i<9
这个示例只是演示。但实际上我不知道会有多少个 DIV 进去,那么这部分该如何驱动呢?
请告诉我哪里错了。谢谢
$(".siblingsDiv").each(function() {
for( var i=0; i<9; i++) {
$(this).css('z-index', i)
}
})
.siblingsDiv {
background: yellow;
height: 50px;
margin-bottom: 20px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="siblingsDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="siblingsDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="siblingsDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="siblingsDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="siblingsDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
您的脚本的问题在于您在方法
for
内部使用了循环each
。这会导致每个.siblingsDiv
元素循环 9 次,从而覆盖 z-index 值。相反,您应该使用.each()
方法本身提供的索引来动态应用正确的值z-index
。修复后,你的代码应如下所示: