gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 09:11:02 25 4
gpt4 key购买 nike

我有这个简单的循环,它将 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 愚蠢的问题,但我不知道我该怎么做?

最佳答案

您可以使用数组的长度启动 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--
}
})()

关于javascript - 从最高处开始对所有 div 应用 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59018511/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com