Javascript 分配动态<；部门>；创建它们时的唯一ID

这与动态div创建有关。我想创建一个动画，其中一个对象（鸟）从地面飞到天空（背景图像包装器div）。这只鸟被用作包装器的子组件。每次单击按钮时，我都想创建一个具有唯一ID的新div标记，以bird为背景，并相应地使用下面的代码来显示动画。我的代码不起作用，而且我找不到我对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;
    });
});

$（文档）.ready（函数（）{
鸟类数量=0；
$（“按钮”）。单击（函数（）{
var bird=document.createElement（'div'）；
setAttribute（'id'，“bird”+bird\u count）；
包装器。附属物（鸟）；
num_var=0；
而（数值小于29）{
$（“#鸟”）。制作动画({
顶部：'-=5px'，
右：'-=5px'，
}, 50);
num_var=num_var+1；
}
鸟数=鸟数+1；
});
});

您可以使用

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

---

注意：-jQueryUI是解决此类问题的大型库。。因此，此答案仅适用于您已经在使用jquery UI的情况。也许此示例可以帮助您：

$("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);
    }

});

$（“按钮”）。单击（函数（）{
var bird=document.createElement（'div'）；
bird.className='bird'；//谢谢@BenjaminGruenbaum
包装器。附属物（鸟）；
对于（var num_var=0；num_var<29；num_var++）{
$（鸟）。设置动画({
顶部：'-=5px'，
右：'-=5px'，
}, 50);
}
});

假设您的HTML类似于：

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

你可以看到一个 另外，如果我们把JS代码放在代码的

部分的底部，我们就可以避免

document.ready

这里有一个解决方案，以防你陷入其中

---

为什么需要分配所有的鸟类ID？您已经有了对这些鸟的引用，这些是您的鸟，您已经有了对它们的引用。@BenjaminGruenbaum我想让新鸟在背景中动画化，就像用户单击按钮一样。所以，我的想法是，每次都应该有唯一的ID。你能解释一下吗？你有兴趣知道一个不需要顺序ID就能提供此功能的答案吗？@BenjaminGruenbaum！也许@BenjaminGruenbaum想要解释的是，如果你不打算使用“ID”，你可以使用一个类来引用新的元素wow！你实际上给了我比我期望的更多…太完美了…太棒了@Jack_of_All_Trades我很高兴我帮了忙，请随时提出更多问题。像

$（“#bird”+counter）

这样的东西是一种反模式。在上面的代码中，我们在编码图形应用程序和编程中使用了一个称为“关注点分离”的核心概念。bird display对象（div）不应该知道bird属性（比如它的count，它存储在JS变量中，而不是dom中）。在您的工作演示中，每个bird都从不同的位置开始。当响应咔哒声时，如何使每只鸟从相同的位置开始？我试着把位置改成绝对，但不行。有什么建议吗？我的错！我还有其他问题…再次感谢你。@ParvSharma我没有否决你，但你的解决方案就像投掷核弹来消灭蚁群一样。好的，是的，我知道jquery UI是一个很大的库。。因为我习惯于使用它，所以我刚才提到了它。。我已经编辑了我的ans

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.
};