如何使用jquery增加动态添加的点击输入的索引

Question

我有一个表单，我有几个字段想要添加动态添加，我想更改每个动态添加的输入的索引 这是我的 html 代码。

<form action="" method="POST" enctype="multipart/form-data">
<div id="hobies">
<input type="text" name="hobies[]">
</div>
<br/>
<button id="add_more">Add More</button>
<br/>
<input type="submit" value="submit" name="submit">
</form>
<div id="tmp_hobies">
<input type="text" class="hobies" name="hobies[]">
</div>

这是我的脚本代码。

$('#add_more').click(function(e) {
e.preventDefault();
$('#hobies').append($("#tmp_hobies").html());
});

这是我想添加爱好[1]，爱好[2]等等...

Answer 1

要将所有这些字段发送到服务器，name="hobies[]"就足够了，即您可以保持代码不变。浏览器应该处理这个问题！

如果您确实需要这样做，一种选择是：

$('#add_more').click(function(e) {
e.preventDefault();
const $o = $('#hobies input').last();
const name = `hobies[${$o.index() + 1}]`;
$o.clone().prop('name', name).val('').appendTo('#hobies');
});

请注意，它不使用#tmp_hobies元素内容。

Answer 2

var rowCount = 1;

var count=0;
function addMoreRows(form) {
rowCount ++;
count =++count;
var recRow = '<p id="rowCount'+rowCount+'"><tr><td><input path="users['+count+'].id" id="users'+count+'.id" name="users['+count+'].id" type="" size="17%"  maxlength="120" /></td><td><input path="users['+count+'].name" id="users'+count+'.name" name="users['+count+'].name" type="text"  maxlength="120" style="margin: 4px 5px 0 5px;"/></td><td><input path="users['+count+'].email" id="users'+count+'.email" name="users['+count+'].email" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td></tr> <a href="javascript:void(0);" onclick="removeRow('+rowCount+');">Delete</a></p>';
$('#addedRows').append(recRow);
}