добавить динамическую форму с уникальным идентификатором, используя jquery

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> 

Теперь у меня есть кнопка «Добавить» над списком, которая называется «Добавить». Когда я нажимаю кнопку добавления, он добавляет <li> something</li> в список. Но я хочу уникальный идентификатор для этого. Как и последний <li> идентификатор - list_7, поэтому я хочу, чтобы новый идентификатор был list_8. В настоящее время я использую этот код JavaScript.

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

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

Пожалуйста, помогите мне с этим. спасибо

Answer 1

Вы можете использовать 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 2

Если вы просто хотите добавить его на основе числа li в ul, вы можете просто запросить длину, чтобы создать свой идентификатор.

$('#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()

Обновлено Скрипка с удалением.

Answer 3

Если у вас нет функции удаления, тогда это так же просто, как просто подсчитать количество элементов в вашем контейнере.

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