在循环 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，bad performance。我建议这样做：

  var buffer = [];

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

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

在循环 jQuery 上添加元素

Adding elements on loop jQuery

javascript

jquery

loops