javascript - 从最高点开始将z-index应用于所有div

我有一个简单的循环，它将z-index添加到DOM中的元素。

let init = () => {
  let allDivs = document.querySelectorAll(".pa");
  let initialIndex = 1;

  for (let i = 0; i < allDivs.length; i++) {
    allDivs[i].style.zIndex = initialIndex++
  }
}
init();

<div class="ma">
   <div class="pa">Test</div>
   <div class="pa">Test</div>
   <div class="pa">Test</div>
</div>

然后，依次地，我所有的.pa div都会得到应用的索引并加1。

问题是，我需要走另一条路。要从最高点开始，无论是3、5还是10，然后倒退。



电流输出

<div class="pa" style="z-index: 1;"></div>
<div class="pa" style="z-index: 2;"></div>
<div class="pa" style="z-index: 3;"></div>

期望的输出

<div class="pa" style="z-index: 3;"></div>
<div class="pa" style="z-index: 2;"></div>
<div class="pa" style="z-index: 1;"></div>

我确实尝试过使用--，因此它会显示为allDivs[i].style.zIndex = initialIndex--，但这只是使z-index降低了1,0，-1。

可能是一个超级愚蠢的问题，但我不知道该怎么做？

最佳答案

您可以反向遍历数组

let init = () => {
  let allDivs = document.querySelectorAll(".pa");

  let initialIndex = 1;

  for (let i = allDivs.length - 1; i >= 0; i--) {

    allDivs[i].style.zIndex = initialIndex++
  }
}
init();

<div class="ma">
  <div class="pa">Test</div>
  <div class="pa">Test</div>
  <div class="pa">Test</div>
</div>