jQueryで複数の同一の要素をdivに追加する方法

StackOverflow https://stackoverflow.com/questions/201530

  •  03-07-2019
  •  | 
  •  

質問

jQueryを使用して、複数の空のdivをコンテナ要素に追加する必要があります。

現時点では、ループを使用して空のhtmlを含む文字列を生成しています

divstr = '<div></div><div></div>...<div></div>';

そしてそれを私のコンテナに注入します：

$('#container').html(divstr);

複数の同一の要素を挿入するよりエレガントな方法はありますか？

私は、連鎖を壊さず、ブラウザをひざまずかせないものを見つけたいと思っています。チェーン可能な .repeat（）プラグイン？

役に立ちましたか？

解決

IEを高速にする場合、または一般的に速度を考慮する場合は、挿入する前にDOMフラグメントを最初に構築する必要があります。

John Resigが手法を説明し、パフォーマンスベンチマークを含めます：

http://ejohn.org/blog/dom-documentfragments/ 

var i = 10, 
    fragment = document.createDocumentFragment(), 
    div = document.createElement('div');

while (i--) {
    fragment.appendChild(div.cloneNode(true));
}

$('#container').append(fragment);

フラグメントの作成にjQueryをあまり使用していないことはわかっていますが、いくつかのテストを実行しましたが、$（fragment）.append（）を実行できないようですが、読んだことがありますJohnのjQuery 1.3リリースには、上記のリンクされた調査に基づいた変更が含まれているはずです。

他のヒント

これを行う最も速い方法は、文字列を使用して最初にコンテンツを構築することです。 DOMまたはjqueryを使用する前に、文字列を使用してドキュメントフラグメントを作成する方がはるかに高速です。残念ながら、IEは文字列を連結するという非常に貧弱な仕事をしているので、それを行う最良の方法は配列を使用することです。

var cont = []; //Initialize an array to build the content
for (var i = 0;i<10;i++) cont.push('<div>bunch of text</div>');
$('#container').html(cont.join(''));

この手法は、コードで非常に多く使用しています。この方法を使用して非常に大きなhtmlフラグメントを構築でき、すべてのブラウザーで非常に効率的です。

jQueryでネイティブJavaScript配列をラップし、map（）を使用してjQuery（DOMノードのリスト）に変換できます。これは公式にサポートされています。

$(['plop', 'onk', 'gloubi'])
.map(function(i, text)
{
    return $('<div/>').text(text).get(0);
})
.appendTo('#container');

これにより作成されます

<div id="container">
<div>plop</div>
<div>onk</div>
<div>gloubi</div>
</div>

繰り返しを避けるために、この手法をよく使用します（DRY）。

Jquery append 関数で通常のループを使用できます。

> 
for(i=0;i<10; i++){
    $('#container').append("<div></div>");
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top