javascript - 如何继续克隆输入的数字序列？

Question

$('button').click(function(){
  $('#inputs').children().first().clone().appendTo('#inputs');
  $('#inputs').children().last().clone().appendTo('#inputs');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='inputs'>
  <input type='text' name="input['name'][1]">
  <input type='text' name="input['name'][2]">
  <input type='text' name="input['name'][3]">
  <br>
  <input type='text' name="input['age'][1]">
  <input type='text' name="input['age'][2]">
  <input type='text' name="input['age'][3]">
</div>
<button>Add</button>

脚本工作正常，但唯一的问题是复制输入的名称。我希望当我克隆它时将 [1] 更改为其序列号，并将 ['name'] 更改为 ['age'] 在第二个克隆中。我还希望将 ['name'] 附加到 ['name'] 列表的末尾。

我考虑过复制名称，然后删除最后两个字母并将其替换为'+index+]'但我想知道这是否是正确的方法。

Answer 1

你可以对其进行普通的字符串操作。由于您知道该模式，因此您只需要输入该数字的数量并粘贴在此处即可。像这样的事情:

$('#inputs').children().last().attr('name', `input['name'][${$('#inputs').children().length}`);

由于现在有 4 个(包括新的)，长度将为您提供 4，因此您最终会将名称设置为 input['name'][4]。接下来会给你 5、6 等等。

如果您需要动态获取名称并且只需要更新号码，您只需查找并替换号码部分(因为您知道它始终是[1]):

const $last = $('#inputs').children().last();
$last.attr('name', $last.attr('name').replace('[1]', `[${$('#inputs').children().length}]`));

通过这种方法，它将使用当前名称，只需用新数字替换 [1] 位，这样您就会得到 [4]首先(所以 input['name'][4] 和 input['age'][4]，然后 [5]等等。