How to loop through elements inside a foreach()

user_15538993 0
Viewed 118

I'm basically trying to loop through links that I've already selected using querySelectorAll, which runs in a forEach method that also loops through a list of boxes. Unfortunately, I'm still unable to solve the second part of the code (looping through the link node list). A simple summary of the code is something like this:

const link = document.querySelectorAll('.link')
const box = document.querySelectorAll('.box')



box.forEach((singleBox) => {
    singleBox.addEventListener("mouseenter", () => {
        link[].classList.add('top'); // I know I need to use a for loop here to loop between link node list, but i'm still unable to find out the way :(
    });
    singleBox.addEventListener("mouseleave", () => {
        link[].classList.remove("top");
    });
});
.box {
      position: relative;
      width: 30rem;
      height: 25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      transition: all 1s ease-out;
 }
   
.img-holder {
      background: #fff;
      width: 18rem;
      height: 18.8rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
  }

.link {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: transparent;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -35;
}
        
.top {
    z-index: 35;
    cursor: pointer;
    transition: all .5s ease-in;
    background-color: red; // Changing he bg-color just for visualizing whats going on //
}
/* first box I'm looping through (using foreach) */
<div class="box">
    <a href="#" class="link"></a> /* first link */
    <div class="img-holder">
      <img src="" alt="image">
      <img src="" alt="another image">
    </div>
</div>

/* second box I'm looping through (using foreach) */

<div class="box">
    <a href="#" class="link"></a> /* second link */
    <div class="img-holder">
      <img src="" alt="image">
      <img src="" alt="another image">
    </div>
</div>

for-loop foreach html loops javascript
1 Answers

You could get the .links per box like below:

const box = document.querySelectorAll('.box');



box.forEach((singleBox) => {
  let boxLinks = singleBox.querySelectorAll('.link');
    singleBox.addEventListener("mouseenter", () => {
      boxLinks.forEach(boxLink => {
        boxLink.classList.add('top');
      });
     
    });
    singleBox.addEventListener("mouseleave", () => {
      boxLinks.forEach(boxLink => {
        boxLink.classList.remove('top');
      });
    });
});
.box {
      position: relative;
      width: 30rem;
      height: 25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      transition: all 1s ease-out;
 }
   
.img-holder {
      background: #fff;
      width: 18rem;
      height: 18.8rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
  }

.link {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: transparent;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -35;
}
        
.top {
    z-index: 35;
    cursor: pointer;
    transition: all .5s ease-in;
    background-color: red; // Changing he bg-color just for visualizing whats going on //
}
/* first box I'm looping through (using foreach) */
<div class="box">
    <a href="#" class="link"></a> /* first link */
    <div class="img-holder">
      <img src="" alt="image">
      <img src="" alt="another image">
    </div>
</div>

/* second box I'm looping through (using foreach) */

<div class="box">
    <a href="#" class="link"></a> /* second link */
    <div class="img-holder">
      <img src="" alt="image">
      <img src="" alt="another image">
    </div>
</div>

user_33902000
Related