Question

我有这样的清单，

<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>

现在我在列表上方有一个名为add的添加按钮。当我点击添加按钮时，它会将<li> something</li>附加到列表中。但我想要一个独特的id。就像上一个<li> id是list_7一样，所以我希望新的id是list_8。我目前正在使用此JavaScript代码。

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

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

请帮助我。谢谢

Answer 1

如果您只是想根据li中ul的数量添加它，您只需查询长度即可构建您的ID。

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

jsfiddle上的代码示例。

<强>更新如果你想删除ul中的某个地方，你可以轻松地跟踪起始索引并从那里开始增量。为简单起见，我只是点击li删除项目。

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

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

使用删除更新fiddle。

Answer 2

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

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);

更新 - 考虑“删除”行为

好的，如果你想删除，我可能会做以下几行。请注意，LI索引现在与任何给定点上页面上实际LI的数量关系较小，因此您可以安全地删除。

//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();
        });
    });
});

Answer 3

如果您没有删除功能，那么这就像计算容器内的项目数一样简单。

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

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

3 个答案: