Express-EJS中如何在forEach循环中递增HTML标签类名

算力阿峰

2026-7-7

解决EJS循环中递增类名的问题

要实现类名随循环递增，核心是利用EJS中forEach的第二个参数（索引值），结合它动态生成类名：

修改forEach的回调函数，添加索引参数index：
原来的循环开头应该是类似<% rows.forEach(function(row) { %>，改成：
```
<% rows.forEach(function(row, index) { %>
```
（index从0开始计数，所以后续要加1得到从1开始的序号）
动态替换标签的固定类名：
将<a href="./post" class="article featured-article featured-article-1">中的featured-article-1替换为featured-article-<%= index + 1 %>，最终完整代码如下：

<% rows.forEach(function(row, index) { %>
    <a href="./post" class="article featured-article featured-article-<%= index + 1 %>">
        <img src="/images/<%= row.image %>" alt="" class="article-image">
        <span class="article-category"><%= row.title %></span>

        <div class="article-data-container">

            <div class="article-data">
                <span><%= row.date %></span>
                <span class="article-data-spacer"></span>
                <span><%= row.date %></span>
            </div>

            <h3 class="title article-title"><%= row.title %></h3>

        </div>
    </a>
<% }); %>

这样循环3次时，标签的类名会依次是featured-article-1、featured-article-2、featured-article-3，完全匹配你的CSS网格需求。

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

相关产品推荐

方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)，限时 9.9 元起

产品介绍相关文档

火山引擎最新活动