jquery - jqueryで複数の変数を追加する

Question

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

数値 var (4) に記載されている回数を html var に追加するにはどうすればよいですか? 上記のコードは機能しません。その理由はわかります。しかし、それを修正する方法がわかりません。何か案は？(私は jQuery の専門家ではありません!)

Answer 1

複数回呼び出すappendと、特にループでは遅くなります。結果を効率的に使用array.join()し、配列を文字列ビルダーとして使用するために、文字列から DOM オブジェクトを 1 回だけコンパイルします。また、append よりも高速な 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
});

Answer 2

*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 3

$このように削除することもできます

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

動作デモ

Answer 4

Try this Code:-


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