在循环jQuery上添加元素

Question

我正在尝试在网页加载时生成一行16个框。

这是我的代码：

var box = $("<div></div>").addClass("box");
    $(document).ready(function(){
            for(var i = 0; i < 16; i++) {
                $("#container").append(box);
                }
            });

我也在for循环的代码块中尝试了此操作：

if($("#container:contains(box)")) {
   $(box).append(box);
}

我有点理解为什么这行不通。 该var box仅引用元素，而不是元素的副本吗？

如您所知，我是新手。 我非常感谢一些有关如何实现此目标的指示。 谢谢。

Answer 1

为什么不只是这样使用？

for(var i = 0; i < 16; i++) {
   $("#container").append('<div class="box box-'+i+'" />');
}

Answer 2

您要一遍又一遍地添加相同的 div。 那只会移动它（在这种情况下，它会回到原来的位置）。 对于每次新的div ：

$(document).ready(function(){
  var ctr = $('#container');

  for(var i = 0; i < 16; i++) {
    ctr.append("<div class='box'></div>");
  }
});

  $(document).ready(function() { var ctr = $('#container'); for (var i = 0; i < 16; i++) { ctr.append("<div class='box'></div>"); } }); 

 .box { margin: 10px; height: 25px; width: 25px; background-color: red; display: inline-block; } 

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

Answer 3

我建议不要在循环中使用append ， 否则会降低性能 。 我建议这样：

  var buffer = [];

  for(var i = 0; i < 16; i++) {
    buffer.push("<div class='box'></div>");
  }

  var html=buffer.join('');
  $('#container').append(html);