1

jQuery を試しているときに、おそらく初心者の間違いであると思われる質問がありますが、解決策が見つからないようです。これはコードです：

$.get("index.html", function() {
    var i = 0;
    for (; i < 3; i++)
    {
        var lDiv = document.createElement('div');
        lDiv.id = 'body-' + i;
        document.getElementById('body').appendChild(lDiv);
        $.get('index.html', function(data) {
            lDiv.innerHTML = "<p>Hello World " + i + "</p>";
        });
    }
});

出力は次のようです

<div id='body-0'></div>
<div id='body-1'></div>
<div id='body-2'>
    <p>Hello World 3</p>
</div>

lDiv.innerHTML=i ごとにコードが実行されると思っていましたが、どうやら最後の i に対してのみ実行されているようです。私は何を見落としていますか？

4

2 に答える 2

2

非同期であるため、のコールバック関数$.get()内で追加と次の呼び出しを実行する必要があります。$.get()success()

var i = 0;
function recursiveLoad() {
       if(i == 3) return;
       var lDiv = document.createElement('div');
       lDiv.id = 'body-' + i;
       document.getElementById('body').appendChild(lDiv);
       $.get('index.html', function(data) {
            lDiv.innerHTML = "<p>Hello World " + i + "</p>";
            i++;
            recursiveLoad();
       });
}
// initial call
recursiveLoad();
于 2012-06-11T16:33:35.450 に答える
2

これは、コールバックが起動される前にループが完了する ( iis 2)ために発生します。

@thecodeparadox のソリューションは機能しますが、HTTP リクエストをシリアル化します。(一度に 1 つずつ起動します。) これにより、リクエストを並行して実行できるため、より高速になります。

for (var i = 0; i < 3; i++)
{
    var lDiv = document.createElement('div');
    lDiv.id = 'body-' + i;
    document.getElementById('body').appendChild(lDiv);
    $.get('index.html', function(i,lDiv) { // the current iteration's `i` and `lDiv` are captured...
        return function(data) {
            lDiv.innerHTML = "<p>Hello World " + i + "</p>";
        }
    }(i,lDiv)); // ...by passing them as an argument to the self-executing function
}
于 2012-06-11T17:24:38.010 に答える