Add a class to all sibling element if one of the element gets that same class when clicked?

Question

const images = document.querySelectorAll(".img_items");

images.forEach((image) => {
  image.addEventListener("click", () => {
    image.classList.add("select");
  });
});

.img_items::after{
  content: ' ' attr(class)
}

<div class="img_container">
  <div class="img_items ">1</div>
  <div class="img_items ">2</div>
  <div class="img_items">3</div>
  <div class="img_items">4</div>
</div>

I tried adding the class to the variable (images) itself on item click event but it didn't add the class to the sibling items.

images.classList.add("select")

How do we achieve this?

Answer 1

Add the class to each element in a loop, just like adding the event listener.

const images = document.querySelectorAll(".img_items");

images.forEach((image) => {
  image.addEventListener("click", () => {
    images.forEach(image => image.classList.add("select"));
  });
});

.img_items::after {
  content: ' ' attr(class)
}

<div class="img_container">
  <div class="img_items ">1</div>
  <div class="img_items ">2</div>
  <div class="img_items">3</div>
  <div class="img_items">4</div>
</div>

If you only want to do it for the siblings in the same .img_container, you can use DOM navigation to first select them and loop over them, rather than looping over all images.

const images = document.querySelectorAll(".img_items");

images.forEach((image) => {
  image.addEventListener("click", () => {
    let siblings = image.parentElement.querySelectorAll(".img_items");
    siblings.forEach(image => image.classList.add("select"));
  });
});

.img_items::after {
  content: ' ' attr(class)
}

<div class="img_container">
  <div class="img_items ">1</div>
  <div class="img_items ">2</div>
  <div class="img_items">3</div>
  <div class="img_items">4</div>
</div>
<hr>
<div class="img_container">
  <div class="img_items ">5</div>
  <div class="img_items ">6</div>
  <div class="img_items">7</div>
  <div class="img_items">8</div>
</div>