自动生成唯一的DOM ID？

Question

当JS和DOM编码,我发现自己经常需要产生不具有比其他目的ID(或名称)组 DOM元素结合在一起(或涉及它们彼此)¹.

这些ID(或名称)将不会在代码中的任何其他位置明确提及,因此它们可以是任何随机字符串,并且对于id的情况,它们必须是唯一的.

JavaScript中是否有标准方法可以自动生成唯一ID？

---

¹说明标识符的这种使用的情况在分组(比如说)单选按钮并将它们链接到相关标签时产生......

我的(天真的noob's)替代了像这样写HTML的大脑麻木的任务

<input type="radio" name="sys" id="sys-0" value="lnx"> <label for="sys-0"> Linux   </label> <br>
<input type="radio" name="sys" id="sys-1" value="osx"> <label for="sys-1"> OS X    </label> <br>
<input type="radio" name="sys" id="sys-2" value="win"> <label for="sys-2"> Windows </label>

(这需要每个sys按钮标签对重复三次基于标识符的标识符)才能写入

<div class="button-group" name="sys">
  <input type="radio" value="lnx"> <label> Linux   </label> <br>
  <input type="radio" value="osx"> <label> OS X    </label> <br>
  <input type="radio" value="win"> <label> Windows </label>
</div>

然后使用一些JS将按钮分组到一个name属性下,并将标签链接到各自的按钮:

$('.button-group').each(function (i, e) {
  var name = $(e).attr('name');
  $(e).find(':radio').each(function (j, f) {
    var id = name + '-' + j;
    $(f).attr('name', name)
        .attr('id', id)
      .next()
        .attr('for', id);
  })
});

这工作正常,但它仍然需要我为这些按钮组提供名称,并为按钮,名称和ID提供唯一ID,否则对我来说是无用的.我会尽快避免所有这些无偿的命名业务

<div class="button-group">
  <input type="radio" value="lnx"> <label> Linux   </label> <br>
  <input type="radio" value="osx"> <label> OS X    </label> <br>
  <input type="radio" value="win"> <label> Windows </label>
</div>

$('.button-group').each(function (i, e) {
  var name = unique_id();
  $(e).find(':radio').each(function (j, f) {
    var id = unique_id();
    $(f).attr('name', name)
        .attr('id', id)
      .next()
        .attr('for', id);
  })
});

当然我可以推出自己的实现unique_id,但我想在重新发明这个非常明显的轮子之前我会问.

Answer 1

我用过的一种方法是

(function(){
    var counter = 0;
    window.uniqueId = function(){
        return 'myid-' + counter++
    }
});

然后

$('.button-group').each(function (i, e) {
  var name = uniqueId();
  $(e).find(':radio').each(function (j, f) {
    var id = uniqueId();
    $(f).attr('name', name)
        .attr('id', id)
      .next()
        .attr('for', id);
  })
});

Answer 2

我同意一些评论者的意见，也许有更好的方法可以做到这一点，但是unique_id()您可以使用的一个简单实现是：

return Math.random().toString(36);

Answer 3

一种常见的方法 - 例如在ajax调用中 - 是使用new Date().getTime().

如果您担心可能会输出两次相同的ID,则可以随时添加验证步骤:

do {uniqueID=new Date().getTime();} while (document.getElementById(uniqueID));