Apply z-index to all divs starting from the highest

Question

I have this simple loop which adds z-index to an element in the 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>

Then, in turn, all my .pa divs do get the index applied and increment by one.

The problem is, I need to go the other way. To start at the highest, whether that be 3, 5 or 10 and then work backwards.

---

CURRENT OUTPUT

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

DESIRED OUTPUT

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

---

I did try using -- so it would read allDivs[i].style.zIndex = initialIndex-- but this just took the z-index down 1,0,-1.

Likely a super dumb question but I can't figure out how I would do this?

Answer 1

You can start the initialIndex with the array's length then decrements by each loop.

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

You can also use IIFE if your init function is only used here.

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

Answer 2

You can traverse the array reverse

 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>

Answer 3

Technically what you need to change is the following:

1. Starting the loop from the length of your array,
2. Using i-- to run it backwards,
3. Referencing the div element by allDivs[i - 1] because indexing starts from zero,
4. Adding value of i to zIndex .

Added extra logging to my solution just to see the values so I would somehow the following:

 const init = () => { let allDivs = document.querySelectorAll(".pa"); for (let i = allDivs.length; i > 0; i--) { allDivs[i - 1].style.zIndex = i; console.log(allDivs[i - 1]); } } init();

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

Hope this helps!

Answer 4

This should work:

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

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

I used an expression, so that the higher the value of i , the lower the value of the zIndex would be. A more elegant, functional programming solution would be (see forEach docs )

let init = () => {
  const allDivs = document.querySelectorAll(".pa");
  allDivs.forEach((element, index) => element.style.zIndex = allDivs.length - index)l
}
init();

I did try using -- so it would read allDivs[i].style.zIndex = initialIndex-- but this just took the z-index down 1,0,-1.

You were probably still starting with let initialIndex = 1 . So your variable's values were 1, then 0, then -1, and it would have continued to -2, -3, etc. You most likely wanted to start at allDivs.length - index.