使用jquery添加具有唯一id的动态表单

我有这样的清单

<input type="button" value="add" id="add"/>


<ul id="sortable"> 
<li class="ui-state-default" id="list_1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
<li class="ui-state-default" id="list_2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 
<li class="ui-state-default" id="list_3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> 
<li class="ui-state-default" id="list_4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> 
<li class="ui-state-default" id="list_5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> 
<li class="ui-state-default" id="list_6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> 
<li class="ui-state-default" id="list_7"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> 

第1项
第2项
第3项
第4项
第5项
第6项
第7项

现在我在列表上方有一个添加按钮，名为add。当我点击add按钮时，它会将

某物添加到列表中。但是我想要一个唯一的id。就像上一个
id是list_7，所以我希望新id是list_8。我现在正在使用这个javascript代码

$('#add').click(function(){

            $('#sortable').append('<li>something</li>');
        })

$（'#添加'）。单击（函数（）{
$（“#可排序”）.append（“
某物”
”）；
})

请帮我做这个。
谢谢
如果您只想根据
ul
中
li
的数量添加它，您只需查询长度即可构建您的id

$('#add').click(function() {
    var $li = $('<li>something</li>');
    var theId = 'list_' + ($("#sortable li").length + 1);
    $li.attr("id", theId);
    $('#sortable').append($li);
});

注意：由于项目是动态添加的，因此需要使用或

用delete更新。
如果您只想根据
ul
中
li
的数量添加它，您只需查询长度即可生成您的id

$('#add').click(function() {
    var $li = $('<li>something</li>');
    var theId = 'list_' + ($("#sortable li").length + 1);
    $li.attr("id", theId);
    $('#sortable').append($li);
});

注意：由于项目是动态添加的，因此需要使用或

使用delete更新。
您可以使用jQuery获取LIs的数量，并将其用作下一个索引的基础。例如：

var list = $('#sortable'); //Cache since you reference it multiple times

 function addLi() {
  var index = list.find('li').length + 1;

  list.append('<li id="list_'+index+'"></li>');

}

$('#add').click(addLi);

var list=$（“#可排序”）//缓存，因为您多次引用它
函数addLi（）{
var index=list.find（'li'）。长度+1；
list.append（'
）；
}
$（'#添加'）。单击（添加）；

更新-考虑到“删除”行为

好的，如果你想删除，我可以按照下面的思路做一些事情。请注意，LI索引现在与页面上任何给定点的实际LIs数量的关联性更小，因此您可以安全地删除

//Variables that will be set on document ready
var liIndex = 0;
var list = '';

function addLi() {
    list.append('<li id="list_'+(liIndex + 1)+'"><button class="remove">Remove</button><br /> Item</li>');
    liIndex += 1;
}

$(function(){
    //Cache for later reference
    list = $('#sortable');
    liIndex = list.find('li').length;

    //Add an LI whenver you click the add button
    $('#add').click(addLi);

    //Remove LI when click on button
    $('button.remove').live('click',function(){
        //Fade out before removing for smoother transition
        $(this).closest('li').fadeOut(250,function(){
            $(this).remove();
        });
    });
});

//将在文档就绪时设置的变量
var指数=0；
var列表=“”；
函数addLi（）{
list.append（'
Remove
项
）；
指数+=1；
}
$（函数（）{
//缓存以供以后参考
列表=$（“#可排序”）；
liIndex=list.find（'li'）.length；
//单击“添加”按钮时添加LI
$（'#添加'）。单击（添加）；
//单击按钮时删除LI
$（'button.remove'）.live（'click'，function（））{
//移除前淡出，以实现更平滑的过渡
$（this）.closest（'li'）.fadeOut（250，function（）{
$（this.remove（）；
});
});
});
您可以使用jQuery获取LIs的数量，并将其作为下一个索引的基础。例如：

var list = $('#sortable'); //Cache since you reference it multiple times

 function addLi() {
  var index = list.find('li').length + 1;

  list.append('<li id="list_'+index+'"></li>');

}

$('#add').click(addLi);

var list=$（“#可排序”）//缓存，因为您多次引用它
函数addLi（）{
var index=list.find（'li'）。长度+1；
list.append（'
）；
}
$（'#添加'）。单击（添加）；

更新-考虑到“删除”行为

好的，如果你想删除，我可以按照下面的思路做一些事情。请注意，LI索引现在与页面上任何给定点的实际LIs数量的关联性更小，因此您可以安全地删除

//Variables that will be set on document ready
var liIndex = 0;
var list = '';

function addLi() {
    list.append('<li id="list_'+(liIndex + 1)+'"><button class="remove">Remove</button><br /> Item</li>');
    liIndex += 1;
}

$(function(){
    //Cache for later reference
    list = $('#sortable');
    liIndex = list.find('li').length;

    //Add an LI whenver you click the add button
    $('#add').click(addLi);

    //Remove LI when click on button
    $('button.remove').live('click',function(){
        //Fade out before removing for smoother transition
        $(this).closest('li').fadeOut(250,function(){
            $(this).remove();
        });
    });
});

//将在文档就绪时设置的变量
var指数=0；
var列表=“”；
函数addLi（）{
list.append（'
Remove
项
）；
指数+=1；
}
$（函数（）{
//缓存以供以后参考
列表=$（“#可排序”）；
liIndex=list.find（'li'）.length；
//单击“添加”按钮时添加LI
$（'#添加'）。单击（添加）；
//单击按钮时删除LI
$（'button.remove'）.live（'click'，function（））{
//移除前淡出，以实现更平滑的过渡
$（this）.closest（'li'）.fadeOut（250，function（）{
$（this.remove（）；
});
});
});
如果您没有删除功能，那么只需计算容器中的项目数即可

$('#add').click(function(){
    var container = $('#sortable');
    var item = $('<li>something</li>')
        .attr('id','list_' + container.find('li').length + 1);
    container.append(item);
});

$（'#添加'）。单击（函数（）{
变量容器=$（“#可排序”）；
变量项=$（“
某物”
”）
.attr（'id'，'list_'+container.find（'li'）。长度+1）；
容器。附加（项目）；
});
如果您没有删除功能，那么只需计算容器中的项目数即可

$('#add').click(function(){
    var container = $('#sortable');
    var item = $('<li>something</li>')
        .attr('id','list_' + container.find('li').length + 1);
    container.append(item);
});

$（'#添加'）。单击（函数（）{
变量容器=$（“#可排序”）；
变量项=$（“
某物”
”）
.attr（'id'，'list_'+container.find（'li'）。长度+1）；
容器。附加（项目）；
});
我试过你的代码..但是当我试着用html打印它以查看id时..它就像一个未定义的列表。我想要一个类似list_8的数字。看我的JSFIDLE，我的第一次检查有一个打字错误。谢谢你，马克……这很有魅力。有没有关于删除li的建议@疯狂的程序员，这要看情况而定。如果删除只删除最后一个
li
，它将起作用。但是，如果您允许从中间删除，则Id将出现问题，并且使用长度生成
Id
将不再有效。嗯，恐怕我需要最后一个选项。我想让用户从列表的中间或任何他们喜欢的地方删除列表。但这可以通过使用锚定标签或任何li旁边的按钮来实现吗？！！我试过你的代码..但是当我试着用html打印它以查看id..它就像列表未定义一样。我想要一个类似list_8的数字。看我的JSFIDLE，我的第一次检查有一个打字错误。谢谢你，马克……这很有魅力。有没有关于删除li的建议@疯狂的程序员，这要看情况而定。如果删除只删除最后一个
li
，它将起作用。但是，如果您允许从中间删除，则Id将出现问题，并且使用长度生成
Id
将不再有效。嗯，恐怕我需要最后一个选项。我想去度假