循環遍歷數組，將每個值分配給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

不太確定如何形成實現此目的的循環。

Answer 1

選擇元素然后使用each元素循環遍歷它們，將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> 

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> 

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>