Question

我有一个变量输入列表，每个项目都有一个唯一的递增名称，如此...

<input type="text" name="values[0]" value="some text">
<input type="text" name="values[1]" value="some other text">
<input type="text" name="values[2]" value="some more text">
...
<input type="text" name="values[n]" value="last text">

整个页面（包括值，本质上是一个数组）是由PHP脚本生成的，但我希望有一个按钮来动态添加另一个文本框。使用jQuery的append（）很容易实现，但是我无法弄清楚如何将附加输入的名称变为＆＃34; values [n + 1]＆＃34;。想法？

Answer 1

但我希望有一个按钮来动态添加另一个文本框。使用jQuery的append（）可以很容易地实现，但是我无法弄清楚如何将附加输入的名称变为＆＃34; values [n + 1]＆＃34;

这是一种方法：

＆＃13;

$('#btn').click(function() {
  var lastname = $('#inputs [name^=value]:last-child')[0].name;
  var next = parseInt(lastname.match(/\d+/)[0]) + 1;
  $('#inputs').append('<input type="text" name="values[' + next + ']" value="more more text">');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputs">
<input type="text" name="values[0]" value="some text">
<input type="text" name="values[1]" value="some other text">
<input type="text" name="values[2]" value="some more text">
</div>
<button id="btn">Append</button>

＆＃13;

Answer 2

由于您在后端使用PHP，因此可以将它们命名为values[]，PHP会自动将它们捆绑到一个数组中。

这样可以省去任何JavaScript的麻烦。

如果您真的想使用jQuery来执行此操作，可以尝试在所有输入上运行此操作...

$('input').attr('name', function(index) { return 'values[' + index + ']'; });

将根据其索引对所有这些内容进行重新索引。

jQuery追加自动增量

2 个答案: