[英]Loop through array, assign each value to an element attribute in Javascript / Jquery
I have an array: 'imageIds': 我有一个数组:'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. 我想在页面上找到类.preview-image的所有元素,我知道这个数字将匹配数组的长度。
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. 然后我想为第一个匹配元素分配一个数据属性'data-img-id'和imageIds [0]的值,第二个匹配元素与imageIds [1]等。
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. 不太确定如何形成实现此目的的循环。
Select the elements then loop through them using each
which passes the index of the current element to it's callback: 选择元素然后使用
each
元素循环遍历它们,将each
元素传递给它的回调:
$(".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>
You could iterate the id array and assign the attribute to the same element of the class array with the same index. 您可以迭代id数组并将该属性分配给具有相同索引的类数组的相同元素。
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>
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..
无论哪种方式,都可以很容易地改变它来从array.length和添加数据属性。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.