リクエスト<section class="slide-item" data-id="slide-1">から返された（子）アイテムのグループごとに（親）要素を作成しています。jsonp各グループは、配列内のオブジェクトです。
array[ object, object, object ]
各オブジェクトには名前、ID などの属性が含まれており、最も重要なのは<img />、対応するオブジェクトに追加するネストされた要素の配列です。DOM<section>は次のようになります。
<section class="slide-item" data-id="slide-1">
<img src="http://lh5.ggpht.com/ySlk_p3UhTdXWyKXv=s1200" />
<img src="http://lh5.ggpht.com/ySlk_p3UhTdXWyKXv=s1200" />
<img src="http://lh5.ggpht.com/ySlk_p3UhTdXWyKXv=s1200" />
</section>
理想的には、1 つの関数で DOM を作成/追加してから、幅、高さ、およびその他の関連するサイズ/レイアウト情報の追加を処理する別の関数を作成することです。
私はこの方法でそれを達成できることを知っています:
module.draft = function () {
_.each( GROUP, function( id ) {
BUILD.push( '<section class="slide-item" style="width:' + widthVar + ';"></section>' );
});
parentElement.append( BUILD.join( '' ) );
}
でも、
DOM が読み込まれるまで待ってから、幅と高さを適用したいと思います。
module.draft = function () {
_.each( GROUP, function( id ) {
BUILD.push( '<section class="slide-item"></section>' );
});
parentElement.append( BUILD.join( '' ) );
};
module.architect = function () { <--- Doesn't work
parentElement
.find( '.slide-item' )
.width( widthVar )
.height( heightVar );
// # Other sizing stuff
};
編集
もう少し情報:は、 GROUP質問の冒頭で言及したオブジェクトの初期配列です:は空の配列です。array[ object, object, object ]BUILD
私は次のように関数を呼び出しています：
module.init = function() {
module.draft();
module.architect();
}
その後$( document ).on( 'ready', _app.init );
また、これを機能させることができることはわかっています$( window ).on( 'load', _app.init );が、理想的ではありません。