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

我有一个按钮时，按下创建新的输入栏，我希望这些输入栏有独特的ID，例如 - textBar1，textBar2，textBar3等。有没有办法给createElement对象分配唯一的ID？

我试着在函数的外部创建一个具有值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"); 
    }); 
});

来源

2014-10-09 Macksen

这就是因为...你不reassinging修改值counter。使用counter+=1代替或只是counter++

你以前是干什么总是添加1到0

来源

2014-10-09 12:54:47

哦，对，这是有道理的。感谢您的帮助！ – Macksen 2014-10-09 13:08:01

@麦克森很高兴它帮助;） – 2014-10-09 13:09:49

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/

来源

2014-10-09 12:59:01 Ashish

这将值'textBar0'分配给第一个动态创建的输入框的id，所以把它放在var选择器下面。第一次单击'添加配料'时，它将采用计数器值0并将id'textBar0'分配给第一个输入框，然后每次单击按钮时将该值递增1（因此第二个输入框的id为'textBar1'，第三个 - 'textBar2'等）。如果您将计数器++放置在var选择器上方，它将从'textBar1'（第一个输入框将获得id'textBar1'，second -'textBar2'，third-'textBar3'等等）开始将值分配给输入框。 – Ashish 2014-10-09 13:20:49

您可以使用Math.random是这样的：

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

这是我的理解是，当你第一次叫Math.random它使用当前时间（毫秒）作为种子，然后返回第一个生成唯一的随机数的0和1之间的序列。随后的调用将遍历生成的数字序列，一次返回一个，使您能够为元素ID生成随机唯一的字符串。

来源

2014-10-09 13:36:25 nettux443

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

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

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

来源

2014-12-10 06:43:23 Tanmay

尽管这个链接可能回答这个问题，但最好在这里包含答案的基本部分，并提供参考链接。如果链接页面更改，则仅链接答案可能会失效。 – 2014-12-10 07:03:17

好的，我会添加一个例子。 – Tanmay 2014-12-10 07:22:14

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

回答

相关问题