簡體   English   中英

數組結束后重新啟動for循環

[英]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.lengthi % blogIcons.length您將得到一個介於0blogIcons.length之間的數字

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM