Question

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

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]（所以{ {1}}和input['name'][4]，然后是input['age'][4]等等。

Answer 2

是的，您只需更改字符串即可。要将名称name添加到name之前<br>列表的末尾，您需要单独选择每个组，然后使用after()代替appendTo() ：

$('button').click(function(){
  var names = $('#inputs').children('[name^="input[\'name"]');
  var clone = names.first().clone();
  clone.attr("name", "input['name'][" + (names.length + 1) + "]");
  names.last().after(clone);
  
  var ages = $('#inputs').children('[name^="input[\'age"]');
  clone = ages.first().clone();
  clone.attr("name", "input['age'][" + (ages.length + 1) + "]");
  ages.last().after(clone);
})

<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]">
  <hr>
  <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>

注意：我将<br>更改为<hr>仅用于演示，因此我们可以看到它。

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

2 个答案: