我有一个包含三个输入的html，比如：
Html格式：
<div class="form-group" id="item-list0">
<label>Role Name</label>
<input asp-for="RoleClaimList[0].Role.Name" class="form-control roles" />
<div id="claim-list0">
<label>Claim Type</label>
<input asp-for="RoleClaimList[0].ClaimList[0].Type" class="form-control claimType" />
<label>Claim Value</label>
<input asp-for="RoleClaimList[0].ClaimList[0].Value" class="form-control claimValue" />
</div>
<a href="#" id="addClaim">Add another claim</a>
</div>
<a href="#" id="add">Add another role</a>
如你所见，我有两个动作“添加另一个角色”和“添加另一个声明”
如果我按add another claim，它只是复制
Claim Type和Claim Value输入如果我按“添加另一个角色”，它将再次添加所有输入
我用Jquery实现了这一点：
<script>
$(function () {
var roleIndex = 0;
var claimIndex = 0;
$("#add").click(function (e) {
e.preventDefault();
roleIndex = roleIndex + 1;
claimIndex = 0;
var n = '<div id="item-list' + roleIndex +'"><label>Role Name</label><input class="form-control" name="RoleClaimList[' + roleIndex + '].Role.Name" /></div>'
var m = '<div id="claim-list' + roleIndex+'"><label>Claim Type</label><input class="form-control" name="RoleClaimList[' + roleIndex + '].ClaimList[' + claimIndex + '].Type" />'
var c = '<label>Claim Value</label><input class="form-control" name="RoleClaimList[' + roleIndex + '].ClaimList[' + claimIndex + '].Value" /> </div>'
$("#item-list" + (roleIndex - 1) + "").append(n);
$("#claim-list" + (roleIndex - 1) + "").append(m);
$("#claim-list" + (roleIndex - 1) + "").append(c);
});
$("#addClaim").click(function (e) {
e.preventDefault();
claimIndex = claimIndex + 1;
var m = '<div id="claim-list' + claimIndex + '"><label>Claim Type</label><input class="form-control" name="RoleClaimList[' + roleIndex + '].ClaimList[' + claimIndex + '].Type" />'
var c = '<label>Claim Value</label><input class="form-control" name="RoleClaimList[' + roleIndex + '].ClaimList[' + claimIndex + '].Value" /> </div>'
$("#claim-list" + (claimIndex - 1) + "").append(m);
$("#claim-list" + (claimIndex - 1) + "").append(c);
});
});
</script>
如果我加上声明它工作正常。添加新角色时出现问题。它应该按照与第一个树输入相同的顺序复制第一个树输入，但它首先创建
Claim Type然后创建Claim Value最后创建Role Name，如图所示：我做错什么了？当做
最佳答案
错误的是，你将新的#item-list1 div添加到现有的#item-list0中，使它成为嵌套结构。
您的#claim-list也是如此，它变成了一个嵌套结构：
#item-list0
⤷ #claim-list0
⤷ #claim-list1
⤷ #claim-list2
⤷ #claim-list3
⤷ #item-list1
⤷ #item-list2
⤷ #item-list3
相反，您应该将它们附加到外部：
将新的
#item-listx附加到<body></body>或任何父元素。将new
#claim-list附加到相应的#item-lists。所以这就是你想要的结构：
#item-list0
⤷ #claim-list0
⤷ #claim-list1
⤷ #claim-list2
#item-list1
⤷ #claim-list0
⤷ #claim-list1
⤷ #claim-list2
如果你看一下，你的代码还有几个问题：
您将复制
id。claimIndex将无法正常工作，因为每次单击#add时都会重置它（如果在添加新角色后单击“addClaim”到以前的角色会发生什么情况？）下面是一个正常工作的示例代码（我认为，可能不是您的实际用例）。我对它进行了重组，以便不需要太多解释就可以很容易地理解它。请根据需要进行编辑以适合您的实际代码库：
var roleIndex = 0;
$('#add')
.on('click', addRole) // Add onclick handler
.trigger('click'); // Trigger it on execution to create the first set
function addRole(){
roleIndex += 1;
// Set `claimIndex` here, not outside of the scope
// because you need it in each separate added role
// so that the claimIndex of each role can correctly counts independently
var claimIndex = 0,
roleClaimList = 'RoleClaimList[' + roleIndex + ']';
var $itemList = $('<div></div>')
.addClass('form-group')
.attr('id', 'item-list-' + roleIndex);
var $roleLabel = $('<label></label>')
.text('Role Name')
.appendTo($itemList);
var $roleInput = $('<input>')
.addClass('form-control roles')
.attr('asp-for', roleClaimList + '.Role.Name')
.appendTo($itemList);
var $addClaimButton = $('<a></a>')
.text('Add another claim')
.attr('href', '#')
.addClass('addClaim')
.on('click', addClaim)
.appendTo($itemList);
$addClaimButton.trigger('click');
$itemList.insertBefore(this);
// Create this function here, not outside
// because it needs the `claimIndex` in scope
function addClaim(e){
e.preventDefault();
claimIndex += 1;
var $claimGroup = $('<div></div>')
.attr('id', 'claim-list-' + roleIndex + '-' + claimIndex)
.insertBefore($addClaimButton);
var $typeLabel = $('<label></label')
.text('Claim Type')
.appendTo($claimGroup);
var $typeInput = $('<input>')
.addClass('form-control claimType')
.attr('asp-for', roleClaimList + '.ClaimList[' + claimIndex + '].Type')
.appendTo($claimGroup);
var $valueLabel = $('<label></label')
.text('Claim Value')
.appendTo($claimGroup);
var $valueInput = $('<input>')
.addClass('form-control claimValue')
.attr('asp-for', roleClaimList + '.ClaimList[' + claimIndex + '].Value')
.appendTo($claimGroup);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" id="item-list-0"></div>
<a href="#" id="add">Add another role</a>要了解有关范围的更多信息，请阅读amazing answer。