How to iterate through DOM nodelist/array

Question

I'm having a difficult time trying to figure out how to iterate through an array of DOM elements. I have an array of divs that contains img elements. I started with a nodelist but converted it to an array. I'd like to be able to press specific buttons and have divs with certain classes disappear. The event listener is functional because upon clicking a button the first element with the specified class disappears, just not the rest of the divs with the same class name.

The relevant HTML

<!-- list items for the project gallery -->
      <ul class="gallery-list">
        <li class="gallery-list-item all-button">All</li>
        <li class="gallery-list-item indoor-button">Indoor</li>
        <li class="gallery-list-item outdoor-button">Outdoor</li>
      </ul>
      <!-- flex container for gallery pictures -->
      <div class="gallery-flex-container">
        <!-- flex items / content images -->
        <div class="gallery-flex-item show-all indoor">
          <img src="images/indoor-1.jpg" alt="indoor garden picture">
        </div>
        <div class="gallery-flex-item show-all outdoor">
          <img src="images/outdoor-1.jpg" alt="outdoor garden picture">
        </div>
        <div class="gallery-flex-item show-all indoor">
          <img src="images/indoor-2.jpg" alt="indoor garden picture">
        </div>
        <div class="gallery-flex-item show-all outdoor">
          <img src="images/outdoor-2.jpg" alt="outdoor garden picture">
        </div>
        <div class="gallery-flex-item show-all indoor">
          <img src="images/indoor-3.jpg" alt="indoor garden picture">
        </div>
        <div class="gallery-flex-item show-all outdoor">
          <img src="images/outdoor-3.jpg" alt="outdoor garden picture">
        </div>
        <div class="gallery-flex-item show-all indoor">
          <img src="images/indoor-4.jpg" alt="indoor garden picture">
        </div>
        <div class="gallery-flex-item show-all outdoor">
          <img src="images/outdoor-4.jpg" alt="outdoor garden picture">
        </div>
        <div class="gallery-flex-item show-all indoor">
          <img src="images/indoor-5.jpg" alt="indoor garden picture">
        </div>
        <div class="gallery-flex-item show-all outdoor">
          <img src="images/outdoor-5.jpg" alt="outdoor garden picture">
        </div>
        <div class="gallery-flex-item show-all indoor">
          <img src="images/indoor-6.jpg" alt="indoor garden picture">
        </div>
        <div class="gallery-flex-item show-all outdoor">
          <img src="images/outdoor-6.jpg" alt="outdoor garden picture">
        </div>
      </div>

The relevant CSS

.hide-indoor {
  display: none;
}

.hide-outdoor {
  display: none;
}

the relevant Javascript

// Script for gallery page picture toggle

let imgArray = [...document.querySelectorAll('.gallery-flex-item')];

console.log(imgArray);

var listItem = document.querySelector('.gallery-list');
var indoor = document.querySelector('.indoor');
var outdoor = document.querySelector('.outdoor');

listItem.addEventListener('click', function (e) {
  for (var i = 0; i < imgArray.length; i++) {
    if (e.target.classList.contains('all-button')) {
      indoor.classList.remove('hide-indoor');
      outdoor.classList.remove('hide-outdoor');

    } else if (e.target.classList.contains('indoor-button')) {

// Here is the section of code I tried incorporating the 'i' variable
// and it works the exact same as the other two 'if' statements.
// Only manipulating the first of elements with selected classes.

      if (imgArray[i].classList.contains('indoor')) {  
        indoor.classList.remove('hide-indoor');
      } else if (imgArray[i].classList.contains('outdoor')) {
        outdoor.classList.add('hide-outdoor');
      }

    } else if (e.target.classList.contains('outdoor-button')) {
      outdoor.classList.remove('hide-outdoor');
      indoor.classList.add('hide-indoor');
    }

  }
});

This is the first time I've tried iterating through DOM elements so I'm really not sure where I'm going wrong.

xuhaib · Accepted Answer · 2018-04-16 21:41:44Z

1

The event listener is functional because upon clicking a button the first element with the specified class disappears, just not the rest of the divs with the same class name.

Use querySelectorAll in place of querySelector.

querySelectorAll will return list of all the matching element nodes unlike querySelector which returns only the first matching element node.

For Reference: Mozilla documentation

answered Apr 16, 2018 at 21:41

xuhaib

7684 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tomasz Kula · Accepted Answer · 2018-04-16 21:58:08Z

0

I've simplified your code a little bit. This should get you started.

You do not need hide-outdoor and hide-indoor css classes that do the same. You can use shared hide class and apply it to different elements.

You also do not need showAll class. If the element is not hidden it will be visible.

const getEl = (selector) => document.querySelector(selector);
const getAllEls = (selector) => [...document.querySelectorAll(selector)];
const hideEl = (el) => el.classList.add('hide');
const showEl = (el) => el.classList.remove('hide');
const hideEls = (selector) => getAllEls(selector).forEach(hideEl);
const showEls = (selector) => getAllEls(selector).forEach(showEl);

const select = getEl('[data-all]');
const indoor = getEl('[data-indoor]');
const outdoor = getEl('[data-outdoor]');
const indoorEls = getAllEls('.indoor');
const outdoorEls = getAllEls('.outdoor');

select.addEventListener('click', () => {
  showEls('.indoor');
  showEls('.outdoor');
})

indoor.addEventListener('click', () => {
  showEls('.indoor');
  hideEls('.outdoor');
})

outdoor.addEventListener('click', () => {
  showEls('.outdoor');
  hideEls('.indoor');
})

.hide {
  display: none;
}

<ul class="menu">
  <li data-all>All</li>
  <li data-indoor>Indoor</li>
  <li data-outdoor="">Outdoor</li>
</ul>
<div class="gallery">
  <div class="gallery-item  indoor">
    <img src="https://via.placeholder.com/50x50" alt="indoor garden picture">
  </div>
  <div class="gallery-item  outdoor">
    <img src="https://via.placeholder.com/150x150" alt="outdoor garden picture">
  </div>
</div>

answered Apr 16, 2018 at 21:58

Tomasz Kula

16.9k3 gold badges72 silver badges82 bronze badges

7 Comments

jtc10 Over a year ago

This is a masterpiece! Thank you for the guidance.

Tomasz Kula Over a year ago

Please consider upvoting my answer and accepting this as a solution :)

jtc10 Over a year ago

Just as a point of interest, why did you use data attributes rather than just using a classname or id?

Tomasz Kula Over a year ago

I probably should have used ids, because you will only have one all, indoor and outdoor button. Didn't want to use classes, because they suggest that there might be multiple elements of this type.

jtc10 Over a year ago

Thanks for the article as well. I'm still new to this and need as much info as possible.

|

Collectives™ on Stack Overflow

How to iterate through DOM nodelist/array

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related