Question

我有一个var，我想用jQuery多次追加。代码是这样的：

var number = 4;                      //number of times the html must be appended
html = $("<div>Content here</div>"); //The html I want to append
$(document).ready(function() {
    $("body").append(html * number); //Append the div multiple times
});

我想知道如何使html var附加数字var（4）中提到的次数？上面的代码不起作用，我明白为什么。但我找不到解决问题的方法。有任何想法吗？（我不是jQuery的优秀专家！）

Answer 1

您不能在jQuery对象（*）和数字（html）之间使用number运算符。您将不得不使用循环，例如：

$(function() {
var number = 4;
  var i = 0;
  var container = $("body");
  for (i = 0; i < number; i += 1) {
    var html = $("<div>Content here</div>");
    container.append(html);
  }
});

编辑：将html放入循环中。

Answer 2

你可以像这样删除$

    $(document).ready(function() {
    var number = 4; 
    html = "<div>Content here</div>";
    for(var i=0;i< number;i++)       
    {
         $("body").append(html);
    }
   });

working demo

Answer 3

Try this Code:-


    $(function() {` 
      for (var i = 0; i<4; i++) {
        $("body").append( ("<div>Content here</div>"));
      }
    });

Answer 4

多次调用append很慢，特别是在循环中。仅在字符串中编译DOM对象一次，以便有效地使用array.join()和数组作为字符串构建器。此外，您更喜欢使用appendTo而不是追加，因为它更快。

示例：

var number = 4;                      //number of times the html must be appended
var content = "<div>Content here</div>";           //The html I want to append
var stringBuilder = [];
for (var i = 0; i < number; i++) {
    stringBuilder.push(content);
}
$(document).ready(function() {
    $(stringBuilder.join('')).appendTo($("body")); //Append the compiled string to the body
});

使用jquery追加多个变量

4 个答案: