如何在EJS循环中动态修改元素属性？

你不需要用jQuery动态修改这些属性，直接通过EJS在服务器渲染阶段就能完成动态赋值，而且你之前的写法存在几个关键问题：

• 循环中重复生成相同ID（outboundListTitle、headingOne），违反DOM规范，导致jQuery选择器只能匹配第一个元素
• 客户端JS修改属性完全多余，服务器端渲染时直接插入变量更高效可靠

正确的写法如下，直接将requests._id嵌入到对应属性中：

<% outboundList.forEach(function(requests){ %>
<div class="card">
  <div class="card-header" id="heading-<%= requests._id %>">
    <h5 class="mb-0">
      <button class="btn btn-link" data-toggle="collapse" 
              data-target="#<%= requests._id %>" 
              aria-expanded="true" 
              aria-controls="<%= requests._id %>">
        <%= requests.clientName %>_<%= requests.wareHouseLabel %>_<%= requests.oldSku %>_<%= requests.productQt %>
      </button>
    </h5>
  </div>

  <div class="collapse show" 
       aria-labelledby="heading-<%= requests._id %>" 
       data-parent="#accordion" 
       id="<%= requests._id %>">
    <div class="card-body">
      ----- some content ----
    </div>
  </div>
</div>
<% }) %>

关键修改说明： #

1. 移除冗余的客户端JS代码：所有属性直接通过EJS变量赋值，不需要在循环里插入<script>修改
2. 动态生成唯一ID：
   • 卡片标题栏的ID改为heading-<%= requests._id %>，避免重复
   • 折叠面板的ID直接用<%= requests._id %>
3. 正确设置data-target：必须加上#前缀，因为它是指向元素ID的选择器，否则Bootstrap无法找到对应的折叠面板
4. 匹配无障碍属性：aria-labelledby和标题栏ID对应，aria-controls和折叠面板ID对应，符合无障碍访问规范

这样渲染后，每个循环项的按钮和折叠面板都会有唯一的关联属性，Bootstrap折叠组件就能正常工作了。

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