javascript - Looping through objects with classes in its own div

This question already has answers here:

Answer

Solution:

Reference the button that is clicked, select the parent, select the children

function imageLooper(btn) {
  var images = btn.closest("div").getElementsByClassName("myImage");
  for (var i = 0; i < images.length; i++) {
    console.log(images[i]);
  }
}

<div>
  <img class="myImage" src="image1.png">
  <img class="myImage" src="image2.png">
  <img class="myImage" src="image3.png">
  <button onclick="imageLooper(this)">Click here!</button>
</div>
<div>
  <img class="myImage" src="image4.png">
  <img class="myImage" src="image5.png">
  <img class="myImage" src="image6.png">
  <button onclick="imageLooper(this)">Click here!</button>
</div>
<div>
  <img class="myImage" src="image7.png">
  <img class="myImage" src="image8.png">
  <img class="myImage" src="image9.png">
  <button onclick="imageLooper(this)">Click here!</button>
</div>
<script src="js/main.js"></script>

Answer

Solution:

Instead of:

var images = document.getElementsByClassName("myImage");

Add a parameter to your elements and pass itself in. For example:

<button onclick="imageLooper(this)">Click here!</button>

Note: 'this'. Then define imageLooper as:

function imageLooper(me) {
    var images = me.parentNode.getElementsByClassName("myImage");
}

Now, images contains only the images in the current block.

Answer

Solution:

In this day and age using inline event handlers is not ideal - you can easily externalise this and use a single event listener using querySelectorAll to identify nodes of interest.

    document.querySelectorAll('div button').forEach( bttn=>{
        bttn.addEventListener('click',e=>{
            let col=e.target.parentNode.querySelectorAll('img');
                col.forEach( img=>{
                    console.log( img )
                })
        })
    })

<div>
  <img class="myImage" src="image1.png">
  <img class="myImage" src="image2.png">
  <img class="myImage" src="image3.png">
  <button>Click here!</button>
</div>
<div>
  <img class="myImage" src="image4.png">
  <img class="myImage" src="image5.png">
  <img class="myImage" src="image6.png">
  <button>Click here!</button>
</div>
<div>
  <img class="myImage" src="image7.png">
  <img class="myImage" src="image8.png">
  <img class="myImage" src="image9.png">
  <button>Click here!</button>
</div>

Source