javascript - 循环图像数组并将它们作为背景图像应用到 div

Question

我有八个这样的 div

<div class="video-thumbnail-container"></div>
<div class="video-thumbnail-container"></div>
<div class="video-thumbnail-container"></div>
<div class="video-thumbnail-container"></div>
<div class="video-thumbnail-container"></div>
<div class="video-thumbnail-container"></div>
<div class="video-thumbnail-container"></div>
<div class="video-thumbnail-container"></div>

我有一个像这样的数组

var videoThumbnails = ["video-1-thumbnail.jpg", "video-2-thumbnail.jpg", "video-3-thumbnail.jpg", "video-4-thumbnail.jpg", "video-5-thumbnail.jpg", "video-6-thumbnail.jpg", "video-7-thumbnail.jpg", "video-8-thumbnail.jpg"];

现在，我想一张一张地循环这些图像，并将它们作为背景图像应用到每个 div。这就是我所做的

var totalThumbnails = videoThumbnails.length;
for (var i = 0; i < totalThumbnails; i++) {
  $(".video-thumbnail-container:nth-child(" + [i] +")").css({"background-image": "url(img/work/" + videoThumbnails[i] + ")"});
}

该代码几乎可以工作，但不会将背景图像应用于最后一个 div。我知道我在这里犯了一个非常愚蠢的错误。

Answer 1

对于第 n 个子节点，索引从 1 而不是 0 开始，因此下面的尝试失败。

var totalThumbnails = videoThumbnails.length;
for (var i = 0; i < totalThumbnails; i++) {
  $(".video-thumbnail-container:nth-child(" + (i+1) +")").css({"background-image": "url(img/work/" + videoThumbnails[i] + ")"});
}