オブジェクトの配列をフィルタリングし、配列内の反復ごとにテンプレートを取得して、現在のオブジェクトからの一意の情報 (プロパティ) に置き換えます。次に、テンプレートが DOM に追加されます。
最初のコード ブロックを見て、コード行がイテレータ関数$('body').append(temp);内にあることに注意してください。$.each
私は理解することに特に興味があります -
反復ごとに DOM が追加されるの
$('body').append(temp);は、イテレータ関数内に残したからですか?$.each配列に 50 個の項目のリストがある場合はどうなるでしょうか? その場合、反復ごとに DOM に何かを追加するのでしょうか?
コード
(function() {
var content = [
{
title: "Speak of the devil and he shall appear",
thumbnail: 'images/bane.jpg',
},
{
title: 'Me the joker',
thumbnail: 'images/Joker.jpg',
},
];
var template = $.trim( $('#blogTemplate').html() );
$.each( content, function( index, obj ) { $(content).each(function() {})
var temp =
template.replace( /{{title}}/ig, obj.title )
.replace( /{{thumbnail}}/ig, obj.thumbnail );
console.log(temp);
$('body').append(temp);
});
})();
この問題を解決するには、代わりに文字列を作成してから、その文字列を DOM に一度だけスローする方がよいと思います。そこで、frag という新しい変数を作成し、それを空の文字列に設定しました。次に、オブジェクトの配列をフィルター処理し、DOM に追加するのではなく、配列内の各オブジェクトに対してfrag+=、スタックされたメソッドが続き.replaceます。
var template = $.trim( $('#blogTemplate').html() );
var frag = '';
$.each( content, function( index, obj ) {
frag +=
template.replace( /{{title}}/ig, obj.title )
.replace( /{{thumbnail}}/ig, obj.thumbnail );
console.log(frag);
});
$('body').append(frag);
})();
そして終了したら、イテレータ関数$('body').append(frag);の外側で言うことができます。$.each
そして、これは私の最後の質問につながります：
3a. $ .each関数の反復ごとに DOM が更新されないようにしました$('body').append(temp);。$.each