EJS动态生成卡片时点击按钮如何获取父级div元素

你不需要手动给每个动态生成的div加唯一id做区分，两种改动极小的方案就能实现点击时精准获取对应卡片元素： #

方案1：通过事件对象向上查找父级卡片（改动最小） #

利用DOM原生的closest()方法，从点击的a标签开始逐级向上匹配对应的卡片父元素，完全不会和其他动态生成的卡片混淆。

• 修改EJS模板中a标签的onclick绑定，传入事件对象：

<a onclick="selectDriver(event)" class="stretched-link"></a>

• 实现selectDriver方法，直接获取对应卡片：

function selectDriver(e) {
  // 阻止a标签默认跳转行为
  e.preventDefault();
  // 查找当前点击元素最近的、携带rider-card类的祖先元素，就是当前点击对应的卡片
  const targetCard = e.target.closest('.rider-card');

  // 后续操作直接基于targetCard即可，比如加选中高亮
  document.querySelectorAll('.rider-card.selected').forEach(card => {
    card.classList.remove('selected');
  });
  targetCard.classList.add('selected');
}

closest()方法匹配逻辑是从当前触发元素开始，逐级向上遍历DOM树，返回第一个匹配传入选择器的元素，适配任意层级的嵌套结构，所有现代浏览器全量支持。

方案2：绑定数据唯一标识（适合后续需要对接数据操作的场景） #

MongoDB中每条group数据自带唯一_id字段，你可以在EJS渲染阶段把这个标识存在元素的自定义data属性上，点击时既能拿到卡片DOM，也能直接拿到对应数据的唯一id，方便后续做接口请求、数据关联。

• 修改EJS模板，给卡片加自定义数据属性，同时补上动态数据渲染的逻辑：

<% for(let i = 0; i < groups.length; i++) { const group = groups[i]; %>
<div class="col-md-4">
  <!-- 存当前group的唯一id到卡片上 -->
  <div class="card rider-card" data-group-id="<%= group._id %>">
    <div class="card-body">
      <h4 class="card-title"><%= group.title %></h4>
      <h5 class="card-subtitle mb-2 text-muted"><%= group.subTitle %></h5>
      <h6 class="card-text"><%= group.availableSpots %> spots available</h6>
      <p class="card-text"><%= group.description %></p>
      <a onclick="selectDriver(event)" class="stretched-link"></a>
    </div>
  </div>
</div>
<% } %>

• 在点击事件中同时获取卡片DOM和对应数据id：

function selectDriver(e) {
  e.preventDefault();
  const targetCard = e.target.closest('.rider-card');
  // 直接拿到当前卡片对应的数据id
  const currentGroupId = targetCard.dataset.groupId;
  // 后续如果需要拉取该group详情、提交选中状态，直接用currentGroupId调用接口即可
}

避坑提示 #

• 不要用循环的索引i作为卡片的唯一标识，一旦列表做排序、筛选、分页，索引会和实际数据错位
• 你用的Bootstrap stretched-link类会自动扩展点击区域到整个定位父级卡片，和上述方案完全兼容，不会出现点击匹配错误的问题

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