在循环 jQuery 上添加元素

Adding elements on loop jQuery

本文关键字：添加 元素 jQuery 循环      更新时间：2023-09-26

我正在尝试在网页加载时生成一行 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仅引用元素而不是元素的副本？

正如你可能知道的，我是新来的。 我真的很感激一些关于我如何实现这一目标的指示。 谢谢。

为什么不这样使用呢？

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

您一遍又一遍地附加相同的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>

我建议不要在循环中使用append，性能不佳。我建议这个：

  var buffer = [];
  for(var i = 0; i < 16; i++) {
    buffer.push("<div class='box'></div>");
  }
  var html=buffer.join('');
  $('#container').append(html);
相关文章：