Loop through array, assign each value to an element attribute in Javascript / Jquery

Question

I have an array: 'imageIds':

imageIds = ["778", "779", "780", "781", "782"];

I want to find all elements of class .preview-image on the page, of which I know the number will match the length of the array.

I then want to assign the first matching element a data attribute 'data-img-id' with the value of imageIds[0], the second matching element with imageIds[1] etc.

So the end result would be converting this:

<div class="preview-image">...</div>
<div class="preview-image">...</div>
<div class="preview-image">...</div> etc

in to this:

<div class="preview-image" data-img-id="778">...</div>
<div class="preview-image" data-img-id="779">...</div>
<div class="preview-image" data-img-id="780">...</div> etc

Not quite sure how to form the loop that would achieve this.

ibrahim mahrir · Accepted Answer · 2017-06-10 20:54:21Z

5

Select the elements then loop through them using each which passes the index of the current element to it's callback:

$(".preview-image").each(function(index) {
    $(this).attr("data-img-id", imageIds[index]);
});

Example:

var imageIds = [100, 200, 300];

$(".preview-image").each(function(index) {
  $(this).attr("data-img-id", imageIds[index]);
});

.preview-image::after {
  content: "data-img-id is: " attr(data-img-id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preview-image">...</div>
<div class="preview-image">...</div>
<div class="preview-image">...</div>

edited Jun 10, 2017 at 20:54

answered Jun 10, 2017 at 20:35

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

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

Comments

Nina Scholz · Accepted Answer · 2017-06-10 20:41:48Z

3

You could iterate the id array and assign the attribute to the same element of the class array with the same index.

var imageIds = ["778", "779", "780", "781", "782"],
    elements = document.getElementsByClassName('preview-image');

imageIds.forEach(function(id, i) {
    elements[i].setAttribute('data-img-id', id);
});

console.log(document.body.innerHTML);

<div class="preview-image"></div>
<div class="preview-image"></div>
<div class="preview-image"></div>
<div class="preview-image"></div>
<div class="preview-image"></div>

edited Jun 10, 2017 at 20:41

answered Jun 10, 2017 at 20:36

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

1 Comment

Redu Over a year ago

A rare appropriate use case of .forEach(). +

caramba · Accepted Answer · 2017-06-10 20:35:12Z

2

maybe something like this: I'm not sure how you "know" the number will match the array length. Either way, it's easy to change this around to go from the array.length and add the data attribute..

var imageIds = ["778", "779", "780", "781", "782"];

var elements = document.querySelectorAll('.preview-image');
for(var i=0; i < elements.length; i++) {

    elements[i].dataset.imgId = imageIds[i];

    console.log(elements[i].dataset);
}

<div class="preview-image">...</div>
<div class="preview-image">...</div>
<div class="preview-image">...</div>

answered Jun 10, 2017 at 20:35

caramba

22.5k20 gold badges94 silver badges134 bronze badges

Collectives™ on Stack Overflow

Loop through array, assign each value to an element attribute in Javascript / Jquery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related