如何在jQuery中为循环生成的按钮ID添加索引后缀

你的现有代码存在几个明显问题：

• 仅针对单个#unique元素操作，没有处理循环生成的多个重复ID按钮
• $("#unique").index(this)中this指向document，索引计算无意义
• append(index)是给按钮添加文本内容，而非修改ID属性

下面分两种场景给出可行的实现方案：

场景1：动态循环生成按钮时直接设置唯一ID #

如果是通过JS循环生成按钮，直接在循环过程中用索引拼接唯一ID：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container" id="buttonContainer"></div>

<script>
$(function() {
  // 自定义要生成的按钮数量
  const buttonCount = 5;
  const container = $("#buttonContainer");
  
  for (let i = 0; i < buttonCount; i++) {
    // 创建按钮并设置唯一ID
    const btn = $('<button type="button" class="btn btn-primary mr-2">Primary</button>')
      .attr('id', `unique${i}`);
    container.append(btn);
  }
});
</script>
</body>
</html>

场景2：批量修正已存在的重复ID按钮 #

如果页面已经有多个ID为unique的按钮，可通过遍历批量修改：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
  <button id="unique" type="button" class="btn btn-primary mr-2">Primary</button>
  <button id="unique" type="button" class="btn btn-primary mr-2">Primary</button>
  <button id="unique" type="button" class="btn btn-primary">Primary</button>
</div>

<script>
$(function() {
  // 遍历所有ID为unique的按钮，逐个设置新ID
  $('button#unique').each(function(index) {
    $(this).attr('id', `unique${index}`);
  });
});
</script>
</body>
</html>

关键说明 #

• 无论哪种场景，核心都是利用递增的索引值拼接ID，确保每个按钮的ID唯一
• each()方法的回调参数index会自动从0开始递增，直接使用即可
• 生成的ID格式unique0、unique1完全符合HTML规范，可直接用于后续的DOM操作

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