我有八个这样的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。我知道我在这里犯了一个非常愚蠢的错误。
对于第 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] + ")"});
}