Question

我有一个网络界面，用户可以点击添加项目...＆＃39;按钮和附加div：

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

由于用户可能会创建任意数量的这些项目，我必须为每个项目分配一个唯一的ID，我尝试过以下内容：

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

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

除了一件重要的事情之外，大部分都可以正常工作：用户也可以删除这些项目中的一个或多个。这引入了重复ID的可能性。

例如：

我有5个项目，ID为1,2,3,4和5.我删除了第3项，当我创建下一个项目时，它会计算4个项目，并提供新项目标识count + 1，即5个）。

我该如何解决这个问题？在这种情况下通常的程序是什么？

Answer 1

这样的事情：

var count = 0;

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

这样它总是唯一的......每次添加一个元素时，变量count都会增加+1。

Answer 2

如果您要查看的是具有唯一生成的ID，那么我建议您使用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();
}

您可以自定义return语句以使用所需的GUID格式。你基本上会有以下类似的东西：

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

我授予您GUID创建的性能低于递增和连接的性能，但GUID为您提供高度“唯一”（极不可能获得两个相同的）ID并生成它们而无需创建循环。对GUIDS的支持通常包含在后端语言中，如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>

Answer 3

尝试：

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

注意我在那里添加了额外的'd'，我认为数字ID不符合。

将ID分配给可添加或删除的动态元素

3 个答案: