Javascript 向列表中动态添加项时递增类和ID

我有一个包含多个项目列表的表单。用户需要能够向每个列表中添加更多的项目，并向表单中添加更多的列表。我的问题是，我需要每个输入“name”和列表“id”是不同的

以下是我所拥有的：

HTML:

清单1

项目1

添加项
添加列表

JQuery：

//add List Item
itemNumber = 2;

$("#addItem").click(function(){

newItem = "<li>Item "+ itemNumber +" <input></li>";

     $('#list').append(newItem);

     itemNumber = itemNumber + 1;
})



//add another list
listNumber = 2;

$("#addList").click(function(){

newList = "<h4>List "+ listNumber +"</h4> <ul id='list'> <li>Item 1</li> </ul> <button id='addItem'>Add Item</button>";

     $('.form').append(newList);

     listNumber = listNumber + 1;    
})

//添加列表项
itemNumber=2；
$（“#添加项”）。单击（函数（）{
newItem=“
项目”+项目编号+”
”；
$（'#list'）。追加（newItem）；
itemNumber=itemNumber+1；
})
//添加另一个列表
listNumber=2；
$（“#添加列表”）。单击（函数（）{
newList=“List”+listNumber+“
项目1
添加项目”；
$（'.form'）.append（newList）；
listNumber=listNumber+1；
})

当前，一旦您向表单中添加了另一个列表，代码将不会再添加更多项

如何为列表和输入提供唯一的名称和ID

---

*注意：我意识到HTML不是一个实际的表单。对于JSFIDLE来说，这种方法更简单。

替换以下函数

$("#addItem").click(function(){
    newItem = "<li>Item "+ itemNumber +" <input></li>";

    $('#list').append(newItem);
    itemNumber = itemNumber + 1;
});

或者，您可以简单地修改构建输入的字符串：

var newItem = "<li>Item "+ itemNumber +" <input name='" + desiredName + "'></li>";

var newItem=“
Item”+itemNumber+”
”；

看起来您正在尝试创建列表列表

我认为最好使用数组，这样就可以将列表的索引映射到该列表中的项目数。然后有两个操作：

添加列表-添加到数组中

将项目添加到列表-使用列表索引，增加计数

这意味着索引0是列表1。在索引0处，您有一个项目数

var list=[]；//数组将索引列表映射到项目计数
函数getNextItem（索引）{
返回`
项${++lists[index]}
`；
}
函数getNextList（）{
列表。推送（0）；
var index=lists.length-1；
返回'List${lists.length}

${getNextItem（索引）}

添加项目`；
}
$（文档）.on（'click'，'addItem'，function（）{
var index=$（this.data（'index'）；
var html=getNextItem（索引）；
$（this.prev（'.list'）.append（html）；
})
$（文档）.on（'单击'，'.addList'，函数（）{
var html=getNextList（）；
$（'.form'）.append（html）；
});
//初始化第一项
$（'.addList'）。触发器（'click'）

添加列表
为什么需要每个输入都有自己的名称和id？如果要添加诸如“删除项”之类的功能，则可以获取与“删除”按钮最近的输入元素。我需要将输入连贯地组织到一个对象中，以便存储、发布和从服务器获取。@user138172我的答案有帮助吗？谢谢Mehdi。但您是否注意到，每当您单击“添加项”时，列表项编号都会增加1？itemNumber不会对每个单独的列表保持顺序。这是因为您正在使用一个全局变量来跟踪ID。您可以简单地使用列表中的项目数来跟踪单个项目。让我修改你的JSFIDLE。。。
$(document).on('click', '#addItem', function() {
    var newItem = "<li>Item "+ itemNumber +" <input></li>";

    $(this).prev().append(newItem);
    itemNumber = itemNumber + 1;
});

$('#myInput').attr('name', 'my_desired_name');

var newItem = "<li>Item "+ itemNumber +" <input name='" + desiredName + "'></li>";