在Javascript / Jquery中遍历数组，将每个值分配给元素属性

Question

我有一个数组：'imageIds':

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

我想找到页面上所有类为.preview-image的元素，我知道它们的数量将与数组的长度匹配。

然后我想将第一个匹配的元素分配一个名为"data-img-id"的数据属性，并使用imageIds[0]的值，将第二个匹配的元素与imageIds[1]等等匹配。

因此最终结果将转换为：

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

转化为以下内容：

<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

不太确定如何编写循环来实现这一点。

- NickTr

Answer 1

选择元素，然后使用each循环遍历它们，并将当前元素的索引传递给回调函数：

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

示例：

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>

- ibrahim mahrir

Answer 2

你可以遍历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>

- Nina Scholz

---

.forEach() 的一个罕见适用案例。 - Redu

Answer 3

也许像这样：我不确定您如何“知道”数字将与数组长度匹配。无论如何，很容易将其改为从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>

- caramba