自动生成唯一的DOM ID？ [英] Automatically generating unique DOM ids?

问题描述

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

When coding with JS and the DOM I find myself constantly needing to generate ids (or names) that have no purpose other than to group DOM elements together (or relate them to each other)¹.

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

These ids (or names) will not be mentioned explicitly anywhere else in the code, and therefore they could be any random strings, and, for the case of ids, they must be unique.

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

Is there a standard way in JavaScript to automatically generate unique ids?

¹ 说明这种标识符使用的情况出现在分组（例如）单选按钮和将它们与相关的标签联系起来......

¹A situation that illustrates such use of identifiers arises at the time of grouping (say) radio buttons and linking them to their associated labels...

我的（天真的noob's）替代写这样的HTML麻烦的任务

My (naive noob's) alternative to the brain-numbing task of writing HTML like this

<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 - 基于每个按钮 - 标签对三次标识符）只是写

(which requires repeating each sys-based identifier three times per button-label pair) is to just write

<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将按钮分组到一个名称下属性，并将标签链接到各自的按钮：

and then use some JS to group the buttons under one name attribute, and link the labels to their respective buttons:

$('.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。我会尽快避免所有这些无偿的命名业务，例如

This works fine, but it still requires me to come up with names for these button groups and unique ids for the buttons, names and ids that are otherwise useless to me. I'd just as soon avoid all this gratuitous naming business with something like

<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 ，但我想在重新发明这个非常明显的轮子之前我会问。

Of course I could roll my own implementation of unique_id, but I thought I'd ask before I reinvent this very obvious-looking wheel.

推荐答案

我采取的一种方法使用的是

One approach which I've used is

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

这篇关于自动生成唯一的DOM ID？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！