如何实现克隆输入框时延续其命名中的数字序列？

这个场景我之前也碰到过，核心就是要提取现有输入框name属性里的数字、递增后替换回去，我给你调整后的代码，完全适配你的结构：

完整代码示例 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='inputs'>
  <div class="input-group name-group">
    <input type='text' name="input['name'][1]">
    <input type='text' name="input['name'][2]">
    <input type='text' name="input['name'][3]">
  </div>
  <br>
  <div class="input-group age-group">
    <input type='text' name="input['age'][1]">
    <input type='text' name="input['age'][2]">
    <input type='text' name="input['age'][3]">
  </div>
</div>
<button>添加新输入框</button>

<script>
$('button').click(function(){
  // 处理name组的克隆与数字递增
  const $lastNameInput = $('.name-group input').last();
  const clonedNameInput = $lastNameInput.clone();
  // 用正则提取name末尾的数字并递增
  const numMatchPattern = /\[(\d+)\]$/;
  const currentNum = parseInt($lastNameInput.attr('name').match(numMatchPattern)[1]);
  const newName = $lastNameInput.attr('name').replace(numMatchPattern, `[${currentNum + 1}]`);
  clonedNameInput.attr('name', newName).val(''); // 清空输入框内容，避免复制原数据

  // 添加到name组末尾
  clonedNameInput.appendTo('.name-group');

  // 处理age组的克隆与数字递增（逻辑和name组一致）
  const $lastAgeInput = $('.age-group input').last();
  const clonedAgeInput = $lastAgeInput.clone();
  const currentAgeNum = parseInt($lastAgeInput.attr('name').match(numMatchPattern)[1]);
  const newAgeName = $lastAgeInput.attr('name').replace(numMatchPattern, `[${currentAgeNum + 1}]`);
  clonedAgeInput.attr('name', newAgeName).val('');

  // 添加到age组末尾
  clonedAgeInput.appendTo('.age-group');
});
</script>

关键细节说明 #

• 分组管理：我给每组输入框加了专属容器（.name-group和.age-group），这样能精准定位到对应组的最后一个输入框，不会和其他组的元素混淆。
• 数字提取逻辑：正则表达式/\[(\d+)\]$/专门匹配name属性末尾的[数字]部分，比如从input['name'][3]里精准提取出3，递增后再替换回原结构里。
• 体验优化：克隆后加了.val('')清空输入框，避免把原输入框的内容也复制过来，更符合实际使用场景。

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