1

次のコードがあります。

HTML

<div id="body"></div>

JS

var site = { 'pageData' : [
    {   
        'loadInTo'      :   '#aboutUs',
        'url'           :   'aboutUs.html',
        'urlSection'    :   '.sectionInner'
    },
    {   
        'loadInTo'      :   '#whatWeDo',
        'url'           :   'whatWeDo.html',
        'urlSection'    :   '.sectionInner' 
    },
    {   
        'loadInTo'      :   '#ourValues',
        'url'           :   'ourValues.html',
        'urlSection'    :   '.sectionInner' 
    },
    {   
        'loadInTo'      :   '#ourExpertise',
        'url'           :   'ourExpertise.html',
        'urlSection'    :   '.sectionInner' 
    }   
]}

for(i=0; i < site.pageData.length; i++) {
    var loader = site.pageData[i];

    $('#body').append('<div id="'+ loader.loadInTo +'" class="section" />');
    $(loader.loadInTo).load(loader.url + ' ' + loader.urlSection);      
}

私がやっていることは、サイト変数をループし、「loadInTo」に設定されたIDを持つjQueryのappendメソッドを使用していくつかのdivを書き出すことです。これはうまくいきます。これが完了したら、jQuery の load メソッドを使用して、他のページからの HTML を div に入力します。div を追加した後にコールバックを行う方法はありますか? このようなもの：

$('#body').append('<div id="'+ loader.loadInTo +'" class="section" />', function(){
        $(loader.loadInTo).load(loader.url + ' ' + loader.urlSection);
    });
4

3 に答える 3

3

jQueryはのコールバックをサポートしていません.append。また、各要素を呼び出すよりも、一度にデータを追加する方がはるかに効率的です。.append以下のコードを参照してください。

追加するすべての要素が文字列に追加されます。文字列が終了すると、マーカーが追加され、HTMLが追加されます。次に、ポーラーがアクティブ化され、marker要素がDOMに存在するかどうかがチェックされます。存在する場合は、ポーラーがクリアされ、マーカーが削除され、コードが実行されます。

更新：.substr(1)IDの前に。を付けてはならないため、IDが設定されているときに使用され#ます。

var toAppend = '';
var markerID = 'mark-end-of-append' + (new Date).getTime(); //Random
for(var i=0; i<site.pageData.length; i++) {
    var loader = site.pageData[i];
    toAppend += '<div id="'+ loader.loadInTo.substr(1) +'" class="section" />';
}
toAppend += '<div id="' + markerID + '"></div>';
$('#body').append(toAppend);
var poller = window.setInterval(function(){
    var detected = document.getElementById(markerID);
    if(detected){ //DOM is much more efficient
        window.clearInterval(poller);
        $(detected).remove(); //Remove marker
        for(var i=0; i<site.pageData.length; i++){
            var loader = site.pageData[i];
            $(loader.loadInTo).load(loader.url + ' ' + loader.urlSection);
        }
    }
}, 100); //Check 10x per second
于 2011-10-23T11:02:25.500 に答える
1

なぜコールバック？$(...).append()非同期呼び出しですか ？そうではないと思うので、別のステートメントを書いてみませんか？

コードの複製を避けたい場合は、一時変数に新しい除算を作成できます。

for( ... ) {
  var loader = ...;
  var newDiv = createDiv( {id:loader.loadInto } );
  $('#body').append( newDiv );
  $(newDiv).load( loader.url + ' ' + loader.urlSection );
}

createDiv関数は次のようになります。

function createDiv( settings ) {
  document.createElement('div');
  $(div).class("section");
  $(div).id(settings.id);
  return div;
}
于 2011-10-23T11:02:13.410 に答える