Question

使用JS和DOM进行编码时，我发现自己经常需要生成除分组 DOM元素之外没有其他目的的id（或名称）（或 related 他们彼此）¹。

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

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

¹在分组（比如说）单选按钮并将它们链接到相关标签时，会出现一种说明标识符使用情况的情况......

My（天真的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));

Answer 4

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

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


   <div class="content">
       <div>Show me when 1st radio checked</div> 
       <div>Show me when 2nd radio checked</div> 
       <div>Show me when 3rdd radio checked</div>
   </div>

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();
})

自动生成唯一的DOM ID？

4 个答案: