Javascript jQuery仅追加添加1项

我试图让jQuery多次将div附加到文档的主体中，但由于某些原因，它只附加了一个项，我猜它是循环中的最后一个项

$（函数（）{
var howManyParticles=11；
var bodyWidth=$（document）.width（）；
var randomsawn=Math.floor（Math.random（）*bodyWidth）+1；
var particleStyle=“背景：浅灰色；宽度：10px；高度：10px；最小高度：10px；最小宽度：10px；位置：固定；底部：0；左侧：“+randomSpawn+”；”；
变量粒子=$（“”）；
函数{
对于（var i=0；i您必须在每次添加元素时克隆该元素，因为您不能多次附加同一元素：

$('body').append(particle.clone());

希望这有帮助


$（函数（）{
var howManyParticles=11；
var bodyWidth=$（document）.width（）；
var randomsawn=Math.floor（Math.random（）*bodyWidth）+1；
var particleStyle=“左：”+randomsawn+“px；”；
变量粒子=$（“”）；
函数{
对于（var i=0；i，有些情况下jQuery会自动为您克隆一个节点，有些情况下则不会。在这种情况下，jQuery不会，因为它认为您实际上只是在尝试重新定位一个节点

不要预先创建DOM元素，而是在循环中创建它


$（函数（）{
var howManyParticles=11；
var bodyWidth=$（document）.width（）；
var randomsawn=Math.floor（Math.random（）*bodyWidth）+1；
var particleStyle=“浮动：左侧；背景：橙色；边框：1px纯红色；宽度：10px；高度：10px；边距：5px；”；
//只是一串------v
var particle=“”；
函数{
对于（var i=0；i实际上，问题是在创建节点时创建了一个节点

 var particle = $("<div class='particle' style=''>&nbsp; Particle div</div>");

正如其他Anwser告诉您的，其他选项是实例化循环内的节点，如下所示：

$(function(){
var howManyParticles = 11;
var bodyWidth = $(document).width();
var randomSpawn = Math.floor(Math.random() * bodyWidth) + 1;
var particleStyle = "background: lightgray;width: 10px;height: 10px;min-height: 10px;min-width: 10px;position: fixed;bottom: 0;left:" + randomSpawn + ";";


function spawnParticles(){
    for(var i = 0; i <= howManyParticles; i++)
    {
        var particle = $("<div class='particle' style='"+ particleStyle +"'>&nbsp;</div>");
        $('body').append(particle);
        console.log('spawned');
    }
}

spawnParticles();
});

$（函数（）{
var howManyParticles=11；
var bodyWidth=$（document）.width（）；
var randomsawn=Math.floor（Math.random（）*bodyWidth）+1；
var particleStyle=“背景：浅灰色；宽度：10px；高度：10px；最小高度：10px；最小宽度：10px；位置：固定；底部：0；左侧：“+randomSpawn+”；”；
函数{
对于（var i=0；嘿，我已经尝试了clone（）函数，但它没有任何作用differently@ZakariaAcharki：添加
.html（）
没有什么区别，只是它序列化并丢弃克隆的元素，然后解析html并在
.append（）时重新创建一个新的元素
获取HTML。因此，这只是为了没有区别而做更多的工作。@Kenzieeflavius与您添加到元素中的样式相关，您可以看到没有样式附加的元素，请查看我的代码段。感谢@Skint的介入，是div的css使其在主体上不可见。@Kenzieeflavius您必须删除该位置已修复，若要将
px
添加到
左侧
样式，请检查我的更新。我确信我已经按照您所说的方式完成了，但它仍在执行相同的操作，只是添加了一个node@KenziieeFlavius：我更新了演示以显示它创建并找到了12个粒子。请记住，您的CSS将它们几乎放在一起。这非常棒谢谢你帮我找到了问题的根源，我需要把
math.random
函数也放在循环中，这样每次它都等于一个不同的值，这是我的错，但非常感谢它的工作！@KenziieeFlavius:这很有意义。：）
$(function(){
var howManyParticles = 11;
var bodyWidth = $(document).width();
var randomSpawn = Math.floor(Math.random() * bodyWidth) + 1;
var particleStyle = "background: lightgray;width: 10px;height: 10px;min-height: 10px;min-width: 10px;position: fixed;bottom: 0;left:" + randomSpawn + ";";


function spawnParticles(){
    for(var i = 0; i <= howManyParticles; i++)
    {
        var particle = $("<div class='particle' style='"+ particleStyle +"'>&nbsp;</div>");
        $('body').append(particle);
        console.log('spawned');
    }
}

spawnParticles();
});