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

我建议不要在循环bad performance中使用append。我建议这个：

  var buffer = [];

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

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

在循环jQuery上添加元素

3 个答案: