有没有一种方法可以为createElement对象分配唯一的ID？

Question

我有一个按钮，按下它会创建新的输入框，我希望这些输入框有唯一的ID，例如：textBar1，textBar2，textBar3等等。

我尝试在函数外创建一个变量，赋值为0，然后在函数内每次运行时将该值加1，但这并不起作用，因为它会给每个被创建的元素分配id textBar0。

有人有解决方法吗？

提前感谢！

HTML

<label for='ingredient'></label>
<input id="textBar" class="textBar" type="name" name="ingredient">

<div id="textBarPosition"></div>
<div id="addRemoveContainer">

<input id="addBar" type="button" value="Add Ingredient">

JavaScript/jQuery

   var counter = 0;
function createSector() {
  var input = document.createElement('input'); 
  input.setAttribute("id", 'textBar' + counter +1);
  input.type = 'text';
  input.name = 'name[]';
  return input;
counter = 1;

}


var form = document.getElementById('textBarPosition');
document.getElementById('addBar').addEventListener('click', function(e) {
    // step 1: create element and set opacity to 0.
    var selector = $(createSector());
    selector.fadeIn();

   // step 2: append it to its parent.
    $(form).append(selector);

    $('#removeBar').click(function(){
        $("input:last-child").remove(".textBar");
    });
});

- Macksen

Answer 1

那是因为你没有重新将改变后的值赋给counter。 使用counter+=1或者counter++即可。

input.setAttribute("id", 'textBar' + counter++); // now it should work

之前您一直在做的事情是把0加上1

- Amit Joki

---

哦，好的，那很有道理。谢谢你的帮助！ - Macksen

@Macksen 很高兴能帮到你 ;) - Amit Joki

Answer 2

最佳方式是使用_.uniqueId函数。

为需要全局唯一 id 的客户端模型或 DOM 元素生成一个唯一 id。如果传入前缀，则会将 id 追加到其后。

_.uniqueId('contact_');
=> 'contact_104'

- Tanmay

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。 - No Idea For Name

好的，我会添加一个例子。 - Tanmay

Answer 3

您可以像这样使用Math.random：

input.setAttribute("id", 'textBar_' + Math.random().toString(36));

据我理解，当您第一次调用Math.random时，它会使用当前时间（以毫秒为单位）作为种子生成一系列介于0和1之间的唯一随机数，然后返回第一个数字。随后的调用将遍历生成的数字序列，每次返回一个数字，从而使您能够为元素ID生成随机唯一字符串。

- nettux

Answer 4

jQuery 代码 -

  var counter = 0;
function createSector() {
  var input = document.createElement('input'); 
  input.setAttribute("id", 'textBar' + counter);
  input.type = 'text';
  input.name = 'name[]';
  return input;


}

var form = document.getElementById('textBarPosition');
document.getElementById('addBar').addEventListener('click', function(e) {
    // step 1: create element and set opacity to 0.
    var selector = $(createSector());
    counter++;
    selector.fadeIn();

   // step 2: append it to its parent.
    $(form).append(selector);

    $('#removeBar').click(function(){
        $("input:last-child").remove(".textBar");
    });
});

JSFiddle工作 - http://jsfiddle.net/Ashish_developer/mtafre04/

- Ashish

---

这将值“textBar0”分配给第一个动态创建的输入框的ID，因此请将其放在var选择器下面。第一次单击“添加成分”时，它会获取计数器值0并将ID“textBar0”分配给第一个输入框，然后每次单击按钮时都会将该值增加1（因此第二个输入框获得ID“textBar1”，第三个-“textBar2”等）。如果您将counter ++放在var选择器上方，则它将从“textBar1”开始为输入框分配值（第一个输入框将获得ID“textBar1”，第二个-“textBar2”，第三个-“textBar3”等）。 - Ashish