jquery - 用jquery附加多个变量

Question

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

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);
    }
   });

工作演示

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 而不是 append，因为它更快。

例子：

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
});