Question

我试图让jQuery多次将div添加到我的文档正文中，但由于某种原因，它只附加了一个项目而我猜测它是循环中的最后一项。

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

这只会向窗口生成1个项目，我如何制作它以产生与i <= howManyParticles一样多的项目？

编辑：我的最终代码

我忘记了我需要将math.random函数放在循环中，以便为每个生成的不同粒子提供不同的水平值！

$(function(){
    var howManyParticles = 11;
    var bodyWidth = $(document).width();

    function spawnParticles(){
        for(var i = 0; i <= howManyParticles; i++)
        {
            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 + ";";
            var particle = $("<div class='particle' style='"+ particleStyle +"'>&nbsp;</div>");
            $('body').append(particle);

        }
    }

    spawnParticles();
});

Answer 1

每次要添加元素时都要克隆元素，因为你不能多次追加相同的元素：

$(function(){
  var howManyParticles = 11;
  var bodyWidth = $(document).width();
  var randomSpawn = Math.floor(Math.random() * bodyWidth) + 1;
  var particleStyle = "left:" + randomSpawn + "px;";
  var particle = $("<div class='particle' style='"+ particleStyle +"'>&nbsp;</div>");

  function spawnParticles(){
    for(var i = 0; i <= howManyParticles; i++)
    {
      $('body').append(particle.clone());
    }
  }

  spawnParticles();
});

希望这有帮助。

.particle{
  background: lightgray;
  width: 10px;
  height: 10px;
  min-height: 10px;
  min-width: 10px;
  bottom: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

left

每个div的随机$(function(){ var howManyParticles = 11; var bodyWidth = $(document).width(); function spawnParticles(){ for(var i = 0; i <= howManyParticles; i++) { var randomSpawn = Math.floor(Math.random() * bodyWidth) + 1; var particleStyle = "left:" + randomSpawn + "px;"; var particle = $("<div class='particle' style='"+ particleStyle +"'> </div>"); $('body').append(particle); } } spawnParticles(); });：

.particle{
  background: lightgray;
  width: 10px;
  height: 10px;
  min-height: 10px;
  min-width: 10px;
  bottom: 0;
  position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

{{1}}

Answer 2

在某些情况下，jQuery会为您自动克隆节点，而其他情况则不会。在这种情况下，它并不是因为它认为您实际上只是想重新定位一个节点。

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

＆＃13;

$(function(){
  var howManyParticles = 11;
  var bodyWidth = $(document).width();
  var randomSpawn = Math.floor(Math.random() * bodyWidth) + 1;
  var particleStyle = "float: left; background: orange; border:1px solid red; width: 10px; height: 10px; margin: 5px;";

  // Just a string------v
  var particle = "<div class='particle' style='"+ particleStyle +"'>&nbsp;</div>";

  function spawnParticles(){
      for(var i = 0; i <= howManyParticles; i++)
      {
 // Append the string, which is turned into a new DOM element on each iteration
          $('body').append(particle);
          console.log('spawned');
      }
  }

  spawnParticles();

console.log("FOUND %s PARTICLES", document.querySelectorAll(".particle").length);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 3

实际上问题是你在做

时创建了一个节点

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

在其他Stack Overflow问题中引用，如下所示：

jQuery Appending an Object multiple times

你只有 ONE html节点，并且你在循环中多次将它附加到正文，所以实际上是同一个节点被删除并在DOM中移动。如果你想要多个节点，你应该克隆像

这样的元素

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

就像其他的anwsers告诉你的那样。其他选项是在循环中实例化节点，就像这样：

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

希望有所帮助：）

jQuery仅添加添加1项

3 个答案: