jQuery Append 仅添加 1 项答案

【问题标题】：jQuery Append only adding 1 itemjQuery Append 仅添加 1 项
【发布时间】：2017-05-04 15:45:24
【问题描述】：

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

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

这只会在窗口中生成 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();
});

【问题讨论】：

标签： javascript jquery append

【解决方案1】：

您必须在每次添加时都克隆该元素，因为您不能多次附加相同的元素：

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

希望这会有所帮助。

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

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

每个 div 随机left：

$(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 +"'>&nbsp;</div>");

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

  spawnParticles();
});

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

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

嘿，我试过 clone() 函数，但它的作用没有任何不同
@ZakariaAcharki：添加.html() 并没有什么不同，只是它序列化并丢弃克隆的元素，然后解析 HTML 并在.append() 获取 HTML 时重新创建一个新元素。所以这只是更多的工作没有区别。
@KenziieeFlavius 与您添加到元素的样式有关，您可以看到附加的元素没有样式，请查看我的 sn-p。
感谢@squint 的干预，是 div 的 css 使它在身体上不可见。
@KenziieeFlavius 您必须删除固定位置并将px 添加到left 样式中，请查看我的更新。

【解决方案2】：

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

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

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

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

我确定我已经按照你说的做了，但它仍然在做同样的事情，只是附加一个节点
@KenziieeFlavius：我更新了演示以显示它创建并找到了 12 个粒子。请记住，您的 CSS 让它们几乎彼此重叠。
非常感谢帮助我找到了问题的根源，我需要将math.random 函数也放入循环中，以便每次都等于不同的值，这是我的错但是非常感谢这有效！
@KenziieeFlavius：这是有道理的。 :)

【解决方案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());

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

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

希望对你有帮助:)

【讨论】：