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

Posted 2023-05-08

【中文标题】创建具有唯一 ID 的动态 div - jQuery

【英文标题】：Create Dynamic div with unique IDs - jQuery

【发布时间】：2011-03-25 21:06:06

【问题描述】：

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

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

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

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

【问题讨论】：

您将这些动态 ID 用于什么目的？

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

【参考方案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" 而不是 "c​​lass" 但都没有用。有什么想法吗？

@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++;