使用jQuery创建具有唯一ID的动态div

Question

如果我的解释不够清晰，请告诉我，因为我只是想到就感到混乱。

我希望能够点击一个名为“添加产品”的按钮，并且每次单击该按钮都会创建一个唯一的div。例如，第一个div将具有id #product1，然后是#product2等。

真正棘手的部分是在div中有两个文本输入框。这些也需要有唯一的ID，以便我可以使用它们中所放置的内容。

如果您有任何解决方案，请告诉我。谢谢， 卡森

- Carson

---

你在使用这些动态ID做什么？ - Gareth

每个 div 中都将有唯一的文本输入字段，然后将用它们来输出信息，例如标题、产品和联系信息到 PDF。我想 ID 并不重要，但我可以使用相同的过程来生成唯一的名称。 - Carson

Answer 1

您可以使用递增的ID变量，例如：

var i = 1;
$("#addProduct").click(function() {
  $("<div />", { "class":"wrapper", id:"product"+i })
     .append($("<input />", { type: "text", id:"name"+i }))
     .append($("<input />", { type: "text", id:"property"+i }))
     .appendTo("#someContainer");
  i++;
});

你可以在这里尝试一下，这是一个非常通用的答案，但你可以明白其中的思路，每次添加完你的项目后只需增加变量即可。

- Nick Craver

---

PS 我显然是新来的，那么如何让代码看起来像代码呢哈哈 - Carson

好的，这个代码大致上是可以运行的。但我似乎无法将类或ID名称应用于创建的DIV中。我完全复制了代码。我看到其他地方有人使用className：“random”而不是“class”，但两者都没有起作用。 有什么想法吗？ - Carson

@Carson - 我在这里为这个类稍微添加了一些演示样式：http://jsfiddle.net/nick_craver/TTHDQ/12/ 只需将上面我的代码中的 wrapper 替换为您希望 div 具有的任何类或多个类即可 :) - Nick Craver

还是没能解决这个问题，但我找到了一个绕过的方法，适用于和我一样遇到同样问题的人。 以下代码会给每个创建的div添加一个class和id：$('<div />').addClass('product').attr('id', 'product'+i) - Carson

感谢您提供的解决方案，我正在尝试将其与在鼠标悬停和鼠标移出时添加类样式相结合，它在Firefox中可以工作，但无法在IE和Google中工作，您知道如何解决吗？这是我使用的代码：'code' jQuery("<div></div>", { "class": "wrapper", id: "product" + i, "onmouseover": "javascript:Highlight(this.id);", "onmouseout": "javascript:Lowlight(this.id);" }) .append(jQuery("<input></input>", { type: "text", id: "name" + i }))...... 'code' - Rav

@Rav - 我猜测 <input> 是一个自闭合或未闭合的元素，IE 可能会拒绝它。另外，不要使用字符串，只需使用类似 onmouseover:Highlight 的东西，其中 Highlight 是您的函数，并在其中使用 this.id... 因为 this 将指向发生事件的 <div>。 - Nick Craver

Answer 2

好的。这是一篇非常古老的帖子，但我认为如果你遇到类似的问题，这可能会有所帮助。我在jQuery中发现了.uniqueId()方法（点击这里）。

它检查元素是否已经有ID，如果没有，则分配一个唯一的ID。缺点是您不能给它指定“自定义ID名称”（例如product_1、product_2等）。分配的ID类似于ui-id-1、ui-id-2等。

要分配唯一的ID，可以像这样操作 -

$("<div class='someDivConntet'></div>").insertAfter($(this)).uniqueId(); 

请确保元素上没有设置id属性。

- rodiwa

---

一个注意事项，这个方法可在jQuery 1.9及以上版本中使用。 - Irvin Dominin

谢谢你展示了一种不同但有趣的方式。 - ni8mr

Answer 3

$(function(){
    var pcount = icount = 0;

    $('<div/>', {
       id:   'product' + pcount++
    }).append($('<input/>', {
       id:   'input' + icount++
    })).append($('<input/>', {
       id:   'input' + icount++
    })).appendTo(document.body);
});

- jAndy

Answer 4

通常情况下，您不需要以这种方式使用ID。

一旦您使用Javascript创建了新元素，您已经拥有一个对象，可以将其传递到函数等中。您当然不需要传递ID，只是为了将其传递到document.getElementByID()中。

- Gareth

---

他可能会将这些值提交到服务器 :) 因此通常需要ID或名称 :) - Nick Craver

ID与表单提交无关，但如果是这种情况，确实需要生成名称。 - Gareth

Answer 5

我正在使用我自己制作的这个

$.fn.uniqueId = function(idlength){
    var charstoformid = '_0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
    if (! idlength) idlength = 10;

    var getId = function() {
        var uniqid = '';
        for (var i = 0; i < idlength; i++) {
            uniqid += charstoformid[Math.floor(Math.random() * charstoformid.length)];
        }
        return uniqid;
    }

    return $(this).each(function(){
        var id = getId()

        while ( $("#"+id).length ) {
            id = getId();
        }
        $(this).attr("id", id);         
    });
}

它有一个生成随机字符链的函数，然后确保生成的字符是唯一的（有0.000001%的可能性 - 但这是可能的），然后更改ID。

- Adam Pietrasiak

Answer 6

您可以使用增加变量和追加的方式来创建唯一的DIV ID代码，如下所示：

var x = 1;
var wrapper = $('.field_wrapper'); //Input field wrapper your div Add in this Class


var fieldtext = '<div ID="product_'+x+'"><label id="label_'+x+'" for="field_'+x+'"></label><input type="text" id="field_'+x+'" name="field_'+x+'" value=""/></div>'; //New input field html 

$(wrapper).append(fieldtext); // Add field html
x++;

- Rathod Paresh