javascript - 使用 jQuery 选择一个不存在的 ID

Question

我想从可用 ID 列表中随机选择一个 ID。选择后，我想检查是否有具有该 ID 的项目，如果没有，则我想添加到那里。如果它存在，那么我想再次生成 ID，直到它选择一个不存在的 ID。

问题:

目前我正在使用 if 语句 来检查一个 ID 是否存在，如果存在则它会再次生成。但是问题是它只检查一次。

有可能新选择的ID也存在，所以我想一直检查直到找到一些不存在的ID。为此，我需要使用循环，但我不知道该怎么做，因为这些项目是动态添加的。

这是我尝试过的:

HTML:

<input type="button" id="button" value="Add new" />

<ul class="items">
  <li id="a4">item with id a4</li>
  <li id="c2">item with id c2</li>
  <li id="c3">item with id c3</li>
  <li id="a1">item with id a1</li>
</ul>

Javascript:

function randID () {
    var arr = new Array("c1", "c2", "c3", "c4", "a1", "a2", "a3", "a4","a5","a6");
    var index = Math.floor(Math.random()*(arr.length));
    return arr[index];
}

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

   var newID = randID();

   if ( $('.items').find('#'+newID).length > 0 ) {
      var newID = randID();   
   } 

   $('.items').append('<li id="'+newID+'">item with id '+newID+'</li>');

});

JSFiddle: https://jsfiddle.net/o4uL6gaj/

Answer 1

循环和检查 id 是否被占用的整个想法造成了性能瓶颈。

我建议生成看似随机的 ID，例如Create GUID / UUID in JavaScript?

如果您确实需要从列表中获取一个 id，请在使用该 id 后将其从列表中删除。例如

var listOfIDs = ['id1', 'id2',.., 'idn'];
function getNewRandomId()
{
   var n = Math.floor(Math.random()*(listOfIDs.length));
   return listOfIDs.splice(n,1);
}