自动生成唯一的DOM ID？

当使用JS和DOM进行编码时，我发现自己经常需要生成除了将DOM元素组合在一起（或将它们彼此关联）之外没有其他目的的id（或名称） ¹ 。

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

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

---

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

我的（天真的noob’s）替代了像这样写HTML的大脑麻木的任务

  Linux  
   OS X  
   Windows  

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

 
   Linux  
   OS X  
   Windows   

然后使用一些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，这对我来说是无用的。 我会尽快避免所有这些无偿的命名业务

 
   Linux  
   OS X  
   Windows  
 $('.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

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

如果您担心可能会输出两次相同的ID，则可以随时添加validation步骤：

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

Answer 3

我同意一些评论者认为可能有更好的方法来做到这一点，但是你可以使用的unique_id()的简单实现是：

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

Answer 4

使用没有ID的无线电标签的示例：

 
   Linux  
   OS X  
   Windows  
 
 
Show me when 1st radio checked
 
Show me when 2nd radio checked
 
Show me when 3rdd radio checked
  

JS

 $('.button-group[name=sys] :radio').change(function(){ $(this).parent().find('label').removeClass('active'); $(this).next().addClass('active'); /* index radios vs content*/ var radioIndex=$('.button-group[name=sys] :radio').index(this); /* hide all the content div, show one that matches radio index*/ $('.content div').hide().eq(radioIndex).show(); })