javascript - 从最高处开始对所有 div 应用 z-index

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>

然后，反过来，我所有的 .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。

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

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();

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

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