在创建时分配动态 <div> 唯一 ID答案

【问题标题】：Assigning dynamic <div> unique ID when they are created在创建时分配动态 <div> 唯一 ID
【发布时间】：2013-06-15 21:23:48
【问题描述】：

这与动态 div 创建有关。我想创建一个动画，其中一个对象（鸟）从地面飞到天空（背景图像包装器 div）。鸟被用作包装器的子 div。每次单击按钮时，我都想创建具有唯一 ID 且以鸟为背景的新 div 标签，并相应地使用下面的代码来显示动画。我的代码不起作用，我找不到 jquery 和 javascript 的新错误。

另外，哪一个更提高效率？为每个标签创建唯一 ID 或将它们分配为数组值？

$(document).ready(function () {
    bird_count = 0;
    $("button").click(function () {

        var bird = document.createElement('div');
        bird.setAttribute('id', "bird" + bird_count);
        wrapper.appendChild(bird);
        num_var = 0;
        while (num_var < 29) {

            $("#bird").animate({
                top: '-=5px',
                right: '-=5px',
            }, 50);
            num_var = num_var + 1;
        }
        bird_count = bird_count + 1;
    });
});

【问题讨论】：

为什么需要分配所有鸟类的 ID？你已经有了对鸟的引用，那些是你的鸟，你有对它们的引用。
@BenjaminGruenbaum 我想让新鸟在后台动画，就像用户点击按钮一样。所以，我的想法是
每次都应该有唯一的 ID。你能解释一下吗？
您是否对提供此功能而无需顺序 ID 的答案感兴趣？
@BenjaminGruenbaum 请！
也许@BenjaminGruenbaum 想要解释的是，如果你不打算使用“ID”，你可以使用一个类来引用新元素

标签： javascript jquery html css

【解决方案1】：

假设您的 HTML 类似于：

<button id='makeBird'>Make a new bird!</button>
<div id='wrapper'></div>

这对你的 JS 代码来说是合理的。

让我们看看如何编写避免"#name"+number 之类的JS。

每次单击按钮时，以下内容都会创建一只鸟。它为它们添加数字。

var button = document.getElementById("makeBird"); // get the button and wrapper elements
var wrapper = document.getElementById("wrapper");

var counter = 0; //our counter
button.onclick = function () { // when you click on the button
    var bird = document.createElement('div'); // make a new bird
    var birdNumber = counter; // assign it a counter number
    counter++; // and increase the counter
    bird.className = "bird";
    bird.onclick = function () { // when you click on it
        alert("HI, I'm bird "+birdNumber); // it tells you which bird it is
    }
    $(bird).animate({ // when we create the bird, animate it
        right: '-=400px',
    }, 10000);
    wrapper.appendChild(bird); // append our bird to the wrapper.
};

你可以看到Working Demo Here

PS，如果我们将我们的JS代码放在我们代码的<body>部分的底部，我们可以避免document.ready

这是一个jQuerified 解决方案，以防万一。

Here is a jQuerified version wrapped in a loop that creates 29 birds on click

【讨论】：

哇！实际上，你给了我比我所期待的更多……太完美了……太棒了！
@Jack_of_All_Trades 很高兴我提供了帮助，请随时在 SO 中提出更多问题。像$("#bird"+counter) 这样的东西是一种反模式。在上面的代码中，我们在编码图形应用程序和一般编程中使用了一个核心概念，称为“关注点分离”。鸟的显示对象（div）不应该知道鸟的属性（比如它的计数，它存储在 JS 变量中而不是 dom 中）。
在您的工作演示中，每只小鸟都从不同的位置开始。在响应点击时，如何使每只鸟从同一位置开始？我尝试将位置更改为绝对位置，但它不会这样做。有什么建议吗？
我的错！我遇到了其他问题...再次感谢您。

【解决方案2】：

也许这个例子可以帮助：

$("button").click(function () {

    var bird = document.createElement('div');
    bird.className = 'bird'; // thanks @BenjaminGruenbaum
    wrapper.appendChild(bird);

    for(var num_var = 0; num_var < 29; num_var++) {
        $(bird).animate({
            top: '-=5px',
            right: '-=5px',
        }, 50);
    }

});

【讨论】：

【解决方案3】：

你可以使用this

这已经存在于 jquery UI 中并生成或删除唯一的 ID 并由 jquery UI 在运行时生成

注意：- Jquery UI 是一个解决这类问题的大型库。所以这个答案只适用于你已经在使用 jquery UI 的情况

【讨论】：

@ParvSharma 我没有对你投反对票，但你的解决方案就像投掷核弹来消灭蚂蚁群。
好吧，我知道 jquery UI 是一个大型库。因为我经常使用它，所以我刚刚提到它。我已经编辑了我的答案