How can i dynamically add data- attribute to an array of html elements

Question

I have a nodelist of html image elements which i converted to an array using the spread operator, so now i have an array of image elements like this [img.item, img.item, img.item, img.item, img.item, img.item]. This is what i want to do, i want to dynamically add a data attribute(data-id) to each element in the array depending on it's position in the array; so that the first element will have a data-id of 0, the seconnd element will have a data-id of 1, the third one will be 2 and the last will have a data-id of 5. here's the code

<div class="container">
    <img src="https://image.shutterstock.com/image-photo/surreal-concept-roll-world-dice-260nw-1356798002.jpg" alt="" class="item" >

    <img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cmFuZG9tJTIwZm9vZCUyMHN0b3JlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="" class="item" >

    <img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg" alt="" class="item" >

    <img src="http://images2.fanpop.com/images/photos/5900000/Randomness-random-5997130-1280-800.jpg" alt="" class="item" >

    <img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cmFuZG9tfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="" class="item" >

    <img src="https://www.computerhope.com/jargon/r/random-dice.jpg" alt="" class="item" >

</div>

<script> const images = document.querySelectorAll(".item")
    const imageArray = [...images] </script>

how do i go about it please?

Arman Ebrahimi · Accepted Answer · 2022-01-30 13:14:53Z

Iterate your image array and then you can set with the setAttribute function the data attribute. Like that:

const images = document.querySelectorAll(".item")
images.forEach((i, index) => {
  i.setAttribute('data-id', index);
})


console.log(images[1])

img {
  width:200px;
}

<div class="container">
    <img src="https://image.shutterstock.com/image-photo/surreal-concept-roll-world-dice-260nw-1356798002.jpg" alt="" class="item" >

    <img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cmFuZG9tJTIwZm9vZCUyMHN0b3JlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="" class="item" >

    <img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg" alt="" class="item" >

    <img src="http://images2.fanpop.com/images/photos/5900000/Randomness-random-5997130-1280-800.jpg" alt="" class="item" >

    <img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cmFuZG9tfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="" class="item" >

    <img src="https://www.computerhope.com/jargon/r/random-dice.jpg" alt="" class="item" >

</div>

Arif Khan · Accepted Answer · 2022-01-30 11:00:43Z

0

Use this:

imageArray.forEach(function(val, index){
    val.setAttribute('data-id', index);
});

answered Jan 30, 2022 at 11:00

Arif Khan

5086 silver badges13 bronze badges

Collectives™ on Stack Overflow

How can i dynamically add data- attribute to an array of html elements

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related