CODEWITHSUNDEEP
javascript
cmp
cmp

Reputation: 452

Apply z-index to all divs starting from the highest

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?

Upvotes: 1

Views: 50

Answers (4)

norbitrial
norbitrial

Reputation: 15166

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!

Upvotes: 1

junwen-k
junwen-k

Reputation: 3654

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

Upvotes: 2

reinis_mx
reinis_mx

Reputation: 1316

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.

Upvotes: 0

Shubham Dixit
Shubham Dixit

Reputation: 1

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>

Upvotes: 1

Related Questions