12

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

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

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

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

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

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

連鎖を壊さず、ブラウザを屈服させないものを見つけたいと思っています。連鎖可能な.repeat()プラグイン？

4

4 に答える 4

19

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() を実行できないようです-しかし、ジョンのjQuery 1.3を読みましたリリースには、上記のリンク先の調査に基づく変更が含まれているはずです。

于 2008-10-14T15:30:54.267 に答える
7

ネイティブJavaScript配列をjQueryでラップし、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）。

于 2008-12-12T00:39:20.030 に答える
7

これを行う最も速い方法は、最初に文字列を使用してコンテンツを作成することです。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(''));

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

于 2008-10-14T17:00:11.900 に答える
1

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

for(i=0;i<10; i++){
    $('#container').append("<div></div>");
}
于 2008-10-14T15:07:03.893 に答える