Назначение идентификаторов для динамических элементов, которые могут быть добавлены или удалены

Question

У меня есть веб-интерфейс, где пользователи могут нажать на кнопку «Добавить элемент ...» и div прилагается:

$('#item-list').append('<div id="newID" class="item">New item</div>'); 

Как пользователь может создать любое количество этих элементов, я должен присвоить уникальный идентификатор для каждого из них, я попытался следующие:

var idNumber = $('.item').length + 1; 

$('#item-list').append('<div id="' + idNumber + '" class="item">New item</div>'); 

Это прекрасно работает по большей части за одну важную вещь, за исключением: пользователь может удалить один или несколько этих предметов. Это вводит возможность дублирования идентификаторов.

Например:

У меня есть 5 пунктов с идентификаторами 1,2,3,4 и 5. Я удаляю пункт 3, когда я создаю мой следующий пункт он подсчитывает 4 пунктов и дает новый идентификатор элемента, который count + 1 составляет 5 (дубликат).

Как я могу решить проблему? Какова обычная процедура в этой ситуации?

Answer 1

Try: Я добавил дополнительный 'D' там

var lastId = 0; 
$('.item').each(function (el) { 
    var id = parseInt($(this).attr('id').splice(1), 10); 
    if (id > lastId) { 
     lastId = id; 
    } 
}); 
lastId += 1; 
$('#item-list').append('<div id="d' + lastId + '" class="item">New item</div>'); 

Заметьте, я не думаю, что номер Иды совместимы.

Answer 2

Что-то вроде этого:

var count = 0; 

$('addItemButtonSelector').click(function(e){ 
    $('#item-list').append('<div id="newID'+count+'" class="item">New item</div>'); 
    count++; 
}); 

Таким образом, он всегда будет уникальным ... переменная count увеличивается +1 каждый раз, когда добавляется элемент.

Answer 3

Если у вас есть уникальные идентификаторы, я предлагаю использовать GUID. Поддержка генерации GUID не является родным в JS, но this post предоставляет следующие функции для их создания:

function guid() { 
    function s4() { 
    return Math.floor((1 + Math.random()) * 0x10000) 
     .toString(16) 
     .substring(1); 
    } 
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + 
    s4() + '-' + s4() + s4() + s4(); 
} 

Вы можете настроить оператор возврата, чтобы использовать нужный формат GUID. Вы бы в основном что-то вроде следующего, хотя:

$('#item-list').append('<div id="' + guid() + '" class="item">New item</div>'); 

Я допускаю, что производительность создания GUID меньше, чем увеличивающиеся и конкатенации, но GUID, дают вам весьма «уникальный» (крайне маловероятно, чтобы получить два те же) идентификаторы и генерировать их без необходимости создавать циклы. Поддержка GUID обычно включается в базовые языки, такие как PHP и C#, а также языки сценариев баз данных, такие как SQL и MySQL. Таким образом, они могут быть довольно мощным инструментом, в зависимости от задачи.

Ниже немного демо:

function guid() { 
 
    function s4() { 
 
    return Math.floor((1 + Math.random()) * 0x10000) 
 
     .toString(16) 
 
     .substring(1); 
 
    } 
 
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + 
 
    s4() + '-' + s4() + s4() + s4(); 
 
} 
 

 

 
$(document).ready(function() { 
 
    var $itemList = $('#item-list'); 
 
    var $itemIdList = $('#item-id-list'); 
 

 
    $("#btnAddElement").on("click", function() { 
 
    $itemList.append('<div id="' + guid() + '" class="item">New item</div>'); 
 
    $itemIdList.append('<li>' + $itemList.children().last().attr('id') + '</li>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="item-list"></div> 
 
    <ol id="item-id-list"></ol> 
 
</div> 
 
<button type="button" id="btnAddElement">Add an element</button>