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

Question

我有这个简单的循环，它添加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>

然后，反过来，我所有的.padiv 都会应用索引并加一。

问题是，我需要走另一条路。从最高点开始，无论是 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。

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

标签： javascript

Answer 1

您可以从initialIndex数组的长度开始，然后按每个循环递减。

let init = () => {
  let allDivs = document.querySelectorAll(".pa");
  let initialIndex = allDivs.length;
  for (let i = 0; i < allDivs.length; i++) {
    allDivs[i].style.zIndex = initialIndex--
  }
}
init();

如果您的 init 函数仅在此处使用，您也可以使用IIFE 。

(() => {
  let allDivs = document.querySelectorAll(".pa");
  let initialIndex = allDivs.length;
  for (let i = 0; i < allDivs.length; i++) {
    allDivs[i].style.zIndex = initialIndex--
  }
})()