javascript - Looping through objects with classes in its own div

Question

187 votes

3 answers

javascript - Looping through objects with classes in its own div

Get the solution ↓↓↓

Undefined answered · Answer 1 · 2022-02-8

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>

Undefined answered

2022-02-8

Link to answer

468

votes

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.

Undefined answered

2022-02-8

Link to answer

553

votes

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 usingquerySelectorAll 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>

Undefined answered

2022-02-8

Link to answer

Source

Share

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

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.

Undefined answered · Answer 3 · 2022-02-8

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 usingquerySelectorAll 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>

Undefined answered

2022-02-8

Link to answer

Source

Share

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Popular technologies

Latest questions:

javascript - Looping through objects with classes in its own div

Answer

Answer

Solution:

Answer

Solution:

Share

Didn't find the answer?

Similar questions