时间戳

首页 > 解决方案 > 在数组结束后重新启动 for 循环

javascript - 在数组结束后重新启动 for 循环

问题描述

我在 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>')
}

标签： javascriptjquery

解决方案

您要查找的内容称为模数，即欧几里得除法的其余部分。 

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>')
}

推荐阅读