如何在HTML中循环生成编号递增的Portfolio项目？

当然有啦！不用手动复制粘贴改编号，这里有几种简单易行的方法帮你批量生成带递增编号的作品集项目结构：

这是最直接的前端方案，不需要额外工具，打开浏览器就能运行：

如果你偏好创建DOM元素的方式（更安全，避免XSS风险）：

// 设定要生成的项目总数
const totalItems = 6;
// 获取要插入项目的容器（记得在HTML里加个<div id="portfolio-container"></div>哦）
const container = document.getElementById('portfolio-container');

for (let i = 1; i <= totalItems; i++) {
  // 逐层创建DOM元素
  const itemDiv = document.createElement('div');
  itemDiv.className = 'item';
  
  const portfolioItemDiv = document.createElement('div');
  portfolioItemDiv.className = 'portfolio-item';
  
  const link = document.createElement('a');
  link.href = `img/portfolio-item-${i}.jpg`;
  link.dataset.lightbox = `image-${i}`;
  
  const img = document.createElement('img');
  img.src = `img/portfolio-item-${i}.jpg`;
  // 建议加alt属性，提升网站可访问性
  img.alt = `Portfolio Item ${i}`;
  
  // 把元素逐层组装起来
  link.appendChild(img);
  portfolioItemDiv.appendChild(link);
  itemDiv.appendChild(portfolioItemDiv);
  container.appendChild(itemDiv);
}

如果你的结构比较简单，也可以用字符串拼接的方式（更简洁）：

const totalItems = 6;
const container = document.getElementById('portfolio-container');
let htmlContent = '';

for (let i = 1; i <= totalItems; i++) {
  htmlContent += `
    <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" alt="Portfolio Item ${i}">
        </a>
      </div>
    </div>
  `;
}

container.innerHTML = htmlContent;

如果你用Node.js或者静态站点工具，模板引擎能帮你在构建阶段生成静态HTML，避免前端动态渲染的延迟。比如用EJS模板：

<!-- EJS模板文件示例 -->
<div id="portfolio-container">
  <% // 循环生成6个项目 %>
  <% for (let i = 1; i <= 6; i++) { %>
    <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" alt="Portfolio Item <%= i %>">
        </a>
      </div>
    </div>
  <% } %>
</div>

类似的，Handlebars、Pug等模板引擎都有类似的循环语法，只需要调整语法格式即可。

如果你是做静态作品集网站，用静态生成器可以直接在构建时生成所有项目的HTML，比如Jekyll的Liquid语法：

<div id="portfolio-container">
  {% // 循环生成1到6号项目 %}
  {% for i in (1..6) %}
    <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" alt="Portfolio Item {{ i }}">
        </a>
      </div>
    </div>
  {% endfor %}
</div>

• 记得给图片加alt属性，提升网站的可访问性
• 如果你的图片数量不确定，可以把总数改成一个变量，方便后续调整
• 如果用JavaScript生成，确保脚本在DOM加载完成后执行（比如放在</body>标签前，或者用DOMContentLoaded事件）

内容的提问来源于stack exchange，提问作者Stephen