自动生成唯一的DOM ID

Automatically generating unique DOM ids?

本文关键字：ID DOM 唯一 自动生成      更新时间：2023-09-26

当使用JS和DOM进行编码时，我发现自己经常需要生成ID（或名称），这些ID除了将DOM元素分组在一起（或相互关联）之外没有其他用途1。

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

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

1说明标识符的这种使用的情况出现在对单选按钮进行分组并将其链接到相关标签时。。。

我的（天真的noob）替代了像这样编写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实现，但我想在重新发明这个外观非常明显的轮子之前，我应该先问一下。

我使用的一种方法是

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

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

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

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

如果你担心你可能会两次输出相同的id，你可以添加一个验证步骤：

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

使用没有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();
})
相关文章：