3

以下は、私がやろうとしていることのプロトタイプです。

var entry_set   = $;

// start to loop data
for([])
{
    // create HTML element to represent that data
    $('<div></div>')
        .data([])
        .addClass([])
        .on([])
        .insertAfter(entry_set);
}

// modify DOM only once all the entries are consolidated to a single jQuery object
entry_set.appendTo('.entries');

コメントがすべてを物語っています。つまり、データを挿入するときにドキュメント DOM を 1 回だけ変更するという考え方です。私は通常、HTML 文字列アプローチ (文字列を使用して同じ構造を単純に連結する) を使用しますが、これに似たものが同様に機能するかどうかに興味があります。

4

3 に答える 3

2

空の DOM 要素を作成し、それに .append() を追加できます

var entry_set = $("<div>"); //empty dom element

// start to loop data
var i = 4;
while(i--) {
    // create HTML element to represent that data
    var item = $('<div>', {
        text: "test " + i
    });
    entry_set.append(item);
}

// modify DOM only once all the entries are consolidated to a single jQuery object
$("body").append(entry_set.children());​

動作デモ: http://jsfiddle.net/F2J6g/1/

編集 空のコレクションから始めて .add() を使用することもできます

var entry_set = $(); //empty collection

// start to loop data
var i = 4;
while(i--) {
    // create HTML element to represent that data
    var item = $('<div>', {
        text: "test " + i
    });
    entry_set = entry_set.add(item);
}

// modify DOM only once all the entries are consolidated to a single jQuery object
$("body").append(entry_set);

http://jsfiddle.net/F2J6g/2/

于 2012-05-08T13:22:42.647 に答える
0

残念ながら、これらのオブジェクトは実際にはどの階層にも関連付けられていないため、呼び出しinsertAfterは実際には何の意味もありません。あなたがする必要があるのは、それらを含んでいる div の中に入れることです。おそらく次のようなものです:

var entry_set = $('<div>');

// start to loop data
for([])
{
    // create HTML element to represent that data
    $('<div></div>')
        .data([])
        .addClass([])
        .on([])
        .appendTo(entry_set);
}

// modify DOM only once all the entries are consolidated to a single jQuery object
entry_set.appendTo('.entries');

私はそれをテストしていませんが、うまくいくはずだと思います。

于 2012-05-08T12:48:29.707 に答える
0

@Guy、必要な HTML 出力が得られるとは思いません。「ラップ」を使用してみてください。サンプル構文:

$('.OuterDiv').wrap('<div class="abc" />');
于 2012-05-08T12:47:39.160 に答える