创建具有唯一 ID 的动态 div - jQuery答案

【问题标题】：Create Dynamic div with unique IDs - jQuery创建具有唯一 ID 的动态 div - jQuery
【发布时间】：2011-03-25 21:06:06
【问题描述】：

如果我解释得不够好，请告诉我，因为我只是想一想就感到困惑。

我应该能够单击“添加产品”按钮并让它每次都创建一个唯一的 div。例如，第一个 div 的 ID 为 #product1，然后是 #product2 等等。

真正棘手的部分是在 div 中有两个输入字段，都是常规文本输入。这些也需要有唯一的 ID，以便我可以使用其中放置的内容。

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

【问题讨论】：

您将这些动态 ID 用于什么目的？
每个 div 中都有唯一的文本输入字段，然后将用于将标题、产品和联系信息等信息输出到 PDF。我想 ID 并不重要，但我可以使用相同的过程来生成唯一名称。

标签： jquery dynamic html

【解决方案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++;
});

You can give it a try here，这是一个非常笼统的答案，但你明白了，每次添加项目后增加变量即可。

【讨论】：

PS 我显然是新来的，所以你如何让代码看起来像代码哈哈
好吧，这有点用。我似乎无法将类或 ID 名称应用于创建的 div。我也完全复制了代码。我在其他地方看到有人使用 className:"random" 而不是 "class" 但都没有用。有什么想法吗？
@Carson - 我在这里为该类提供了一些样式：jsfiddle.net/nick_craver/TTHDQ/12 只需将上面代码中的wrapper 替换为您希望 div 具有的任何类或类:)
仍然无法使其正常工作，但我为你们中的人找到了解决方法。下面为每个创建的 div 添加一个类和 id： $('
').addClass('product').attr('id', 'product'+i)
感谢您的解决方案，我正在尝试使用这种结合添加类样式 onmouseover 和 onmouseout，它可以在 Firefox 中使用，但无法在 IE 和 Google 中使用，您知道该怎么做吗?这是我使用的代码 'code' jQuery("
", { "class": "wrapper", id: "product" + i, "onmouseover": "javascript:Highlight(this. id);", "onmouseout": "javascript:Lowlight(this.id);" }) .append(jQuery("", { type: "text", id: "name" + i }))......'代码'

【解决方案2】：

好的。这是一个非常古老的帖子，但我认为如果您遇到类似问题，它可能会有所帮助。我在 jQuery (see here) 中遇到了 .uniqueId()。

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

要分配一个唯一的 id，你可以这样 -

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

只要确保您没有在元素上设置 id 即可。

【讨论】：

请注意，此方法可从 jQuery 1.9 开始
感谢您展示不同但有趣的方式。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

一旦你使用 Javascript 创建了新元素，你就已经有了一个可以传递给函数等的对象。你当然不需要传递 ID 就可以传递给 @987654321 @

【讨论】：

他可能将值提交到服务器 :) 所以通常你需要一个 ID 或一个名字:)
ID 与表单提交没有任何关系，但如果是这种情况，则需要生成名称是对的

【解决方案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。

【讨论】：

【解决方案6】：

您可以使用 Just 增加变量并附加来创建唯一的 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++;

【讨论】：