如何在HTML中创建循环

Question

我有一个投资组合的html文件.每个投资组合项目如下所示:

                    <div class="item">
                        <div class="portfolio-item">
                            <a href="img/portfolio-item-1.jpg" data-lightbox="image-1"><img src="img/portfolio-item-1.jpg"></a>
                        </div>
                    </div>

是否有一种简单易行的循环方式.因此,每次数字改变时,我都会创建多个div.所以我第二次得到投资组合项目2.

Answer 1

你可以像这样使用一些 JavaScript：

for(var i = 0; i < 10; i++) {
   document.body.innerHTML += '<div class="item"><div class="portfolio-item"><a href="img/portfolio-item-' + i + '.jpg" data-lightbox="image-' + i + '"><img src="img/portfolio-item-' + i + '.jpg"></a></div></div>'
}

然后你可以改变i < 10输出的项目数量。

此示例仅输出到 body 标记，因此您还需要将其更改为您想要输出这些项目的容器。

Answer 2

HTML不是一种编程语言,也没有编写循环的能力.要做到这一点,你需要一些其他语言来生成HTML,例如JavaScript.