使用jQuery修改数组式name属性值，实现索引递增且不破坏其他内容

原代码存在的问题 #

• 索引替换逻辑错误：用replace("0", $k)只会替换字符串里的第一个"0"，当索引变成1之后，再克隆就找不到"0"来替换了；而且如果name属性里其他位置有0（比如字段名包含0），也会被误改
• 索引计数混乱：每次点击按钮执行两次$k++，导致索引直接跳变（0→2→4...），出现断层
• 重复ID问题：克隆的日期选择器保留了原ID，多个相同ID会导致组件失效
• 未清空表单值：克隆后原输入框的内容会被保留，新增的表单应该是空白的
• 按钮ID重复：克隆带id="addschool"的按钮，页面出现多个相同ID元素，点击事件只会对第一个按钮生效

修正后的代码 #

HTML（调整按钮ID为class，新增容器管理表单）

<!-- 新增容器包裹所有school-copy表单 -->
<div class="school-form-container">
  <div class="row school-copy mt-3">
    <div class="col-lg-3">
      <input class="text-input defaultText form-control shadow-none school-variables" type="text" placeholder="Okul Adı" name="school[0][name]" value="">
    </div>
    <div class="col-lg-3">
      <input class="text-input defaultText form-control shadow-none school-variables" type="text" placeholder="Şehir" name="school[0][city]" value="">
    </div>
    <div class="col-lg-3">
      <input class="text-input defaultText form-control shadow-none school-variables" type="text" placeholder="Bölüm" name="school[0][faculty]" value="">
    </div>
    <div class="col-lg-2">
      <input class="text-input defaultText datepicker form-control shadow-none school-variables" type="date" placeholder="Mezuniyet Tarihi" name="school[0][graduation_date]" value="">
    </div>
    <div class="col-lg-1 col-sm-4 delete-btn-append d-flex">
      <div class="mobile-show col-xs-3"></div>
      <div class="col-lg-6 col-xs-4">
        <!-- 把id改成class，避免重复 -->
        <a class="btn btn-primary add-school"><span class="bt_bb_button_text"><i style="padding-bottom: 6px" class="fa fa-plus" aria-hidden="true"></i></span></a>
      </div>
      <div class="col-lg-6 col-xs-4">
        <a class="btn btn-danger m-l-10 delete-school"><span class="bt_bb_button_text"><i class="fa fa-trash" aria-hidden="true"></i></span></a>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

JavaScript（修正索引替换、计数逻辑，处理动态元素）

$(document).ready(function() {
  // 事件委托处理动态生成的新增按钮
  $(document).on('click', '.add-school', function() {
    // 用当前表单数量作为新索引
    const newIndex = $('.school-copy').length;
    // 克隆最后一个表单
    const $newForm = $('.school-copy:last').clone();
    
    // 清空输入框值，移除重复ID
    $newForm.find('input').val('');
    $newForm.find('.datepicker').removeAttr('id');
    
    // 正则精准替换name属性里的索引
    $newForm.find('input').each(function() {
      const oldName = $(this).attr('name');
      const newName = oldName.replace(/school\[(\d+)\]/, `school[${newIndex}]`);
      $(this).attr('name', newName);
    });
    
    // 添加新表单到容器
    $newForm.appendTo('.school-form-container');
  });

  // 事件委托处理删除按钮
  $(document).on('click', '.delete-school', function() {
    // 至少保留一个表单
    if ($('.school-copy').length > 1) {
      $(this).closest('.school-copy').remove();
      // 删除后重新整理所有表单的索引，保持连续
      $('.school-copy').each(function(index) {
        $(this).find('input').each(function() {
          const oldName = $(this).attr('name');
          const newName = oldName.replace(/school\[(\d+)\]/, `school[${index}]`);
          $(this).attr('name', newName);
        });
      });
    }
  });
});

关键说明 #

• 精准索引替换：用正则表达式/school\[(\d+)\]/匹配school[X]结构，只替换括号内的数字，不会误改其他内容
• 动态索引计算：基于当前表单数量生成新索引，无需单独维护计数变量，逻辑更可靠
• 动态元素处理：用事件委托绑定按钮事件，确保新增的动态按钮能正常触发
• 表单清理：克隆后清空输入值、移除重复ID，避免组件冲突和残留内容
• 索引重排：删除表单后重新整理所有索引，保证序列连续（可根据需求选择是否保留）

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