[英]Restart a for loop after the end of an array
我使用JavaScript工作,正在嘗試向網站添加一些圖像。
我在頁面上有博客文章列表。 我有一堆小的獨立圖像(想像小圖標圖像),我想將它們放置在博客文章提要的兩側。 它們有點像隨機背景圖像。 資訊提供越長,就會自動放置更多圖像。
這是到目前為止我所擁有的一些示例代碼。 現在,我只是在頁面上添加文本以使此工作正常。
我需要幫助弄清楚如何在到達數組末尾時重新啟動此循環。 例如,在打印6url.jpg之后,如果我的imageCount大於6,我想打印1url.jpg,依此類推。我玩過continue和while循環,但不確定如何實現。
var blogIcons = ["1url.jpg", "2url.jpg", "3url.jpg", "4url.jpg", "5url.jpg", "6url.jpg"];
var blogFeedHeight = $(".blog-feed").height();
var imageDistance = 400;
// Determining how many images to place based on the blog feed height;
var imageCount = Math.ceil(blogFeedHeight/imageDistance);
// the number of images that should be inserted.
for(var i = 0; i < imageCount; i++){
$('blog-feed').append('<div class="blog-icon">' + blogIcons[i] +'</div>')
}
您正在尋找的是模數,即2個數字的歐幾里得除法的其余部分。
var blogIcons = ["1url.jpg", "2url.jpg", "3url.jpg", "4url.jpg", "5url.jpg", "6url.jpg"]; var imageCount = 10; // the number of images that should be inserted. for (var i = 0; i < imageCount; i++) { console.log(blogIcons[i % blogIcons.length]) }
我簡化了您的問題,使其可以在StackOverflow上運行。 但您可以使用“%”獲得正確的索引
因此,您的腳本應如下所示:
var blogIcons = ["1url.jpg", "2url.jpg", "3url.jpg", "4url.jpg", "5url.jpg", "6url.jpg"];
var blogFeedHeight = $(".blog-feed").height();
var imageDistance = 400;
// Determining how many images to place based on the blog feed height;
var imageCount = Math.ceil(blogFeedHeight/imageDistance);
// the number of images that should be inserted.
for(var i = 0; i < imageCount; i++){
$('blog-feed').append('<div class="blog-icon">' + blogIcons[i % blogIcons.length] +'</div>')
}
您無需重新啟動循環。 相反,您可以使用模除法從數組的范圍內提取項目
var blogIcons = ["1url.jpg", "2url.jpg", "3url.jpg", "4url.jpg", "5url.jpg", "6url.jpg"]; for (var i = 0; i < 14; i++) { console.log(blogIcons[i % blogIcons.length]); }
當i % blogIcons.length
做i % blogIcons.length
您將得到一個介於0
和blogIcons.length
之間的數字
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.