有没有办法为 createElement 对象分配唯一的 ID？

Posted 2023-04-18

【中文标题】有没有办法为 createElement 对象分配唯一的 ID？

【英文标题】：Is there a way to assign unique IDs to createElement objects?

【发布时间】：2014-12-04 09:56:52

【问题描述】：

按下时我有一个按钮会创建新的输入栏，我希望这些输入栏具有唯一的 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");
    );
);

【参考方案1】：

这是因为您没有将更改后的值重新评估为 counter。 请改用counter+=1 或仅使用counter++

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

您之前所做的总是将1 添加到0

【讨论】：

哦，对了，这很有道理。感谢您的帮助！

@Macksen 很高兴它有帮助 ;)

【参考方案2】：

最好的方法是使用_.uniqueId。

为需要的客户端模型或 DOM 元素生成一个全局唯一的 id。如果传递了前缀，则将 id 附加到它。

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

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。

好，我再举个例子。

【参考方案3】：

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

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

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

【参考方案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/

【讨论】：

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