非同期でロードするコンテンツの URL の配列があります。
var toLoad = ['snippet1.html', 'snippet2.html', ... ];
<div>
各スニペットを AJAX で読み込んで、それを parentに追加し、配列内のコンテンツの順序を維持しようとしています。私のコードの残りの部分が設定されている方法のため (およびパフォーマンス上の理由から)、this similar questionへの回答で示唆されているように、呼び出しを使用して、またはチェーン呼び出しによって、同期的にロードしたくありません。代わりに、AJAX コールバック関数にロジックを入れて、インデックスに基づいて、読み込まれたスニペットを正しく配置したいと考えています。async:false
.ajax()
次のコードが機能します。
var $parent = $('#mydiv');
toLoad.forEach(function(url, i) {
// load snippet
$.get(url, function(snippet) {
// attach order to DOM element
snippet = $(snippet).data('order', i);
// find the sibling with the next lowest order number
var $prev = $parent
.children()
.filter(function() {
return $(this).data('order') < i
})
.last();
if ($prev[0]) snippet.insertAfter($prev);
else $parent.prepend(snippet);
});
});
……でも、もったいない。.data()
特に、DOM 要素に;で順序を付けるのは好きではありません。これは醜いように思えます。私ができることなら、これを DOM に貼り付けたくありません。
定義済みの順序でコンテンツを div に非同期にロードするという目標を達成するためのより良い方法はありますか?