将数字加一

Question

我有一堆共享相同类名的 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>

Answer 1

使用

.index()

方法来实现你的目标。

工作片段：

$(".siblingsDiv").each(function() {
    $(this).css('z-index', $(this).index())
})

.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>

.长度`