Question

While trying out jQuery, I have a question that is probably a newbie mistake, but I cannot seem to find the solution. This is the code:

$.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>";
        });
    }
});

The output seems to be

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

I expected the lDiv.innerHTML= code to be executed for each i, but apparently it is only executed for the last i? What am I overlooking?

Answer 1

This happens because the loop completes (i is 2) before any of the callbacks are fired.

@thecodeparadox’s solution works, but it serializes the HTTP requests. (Makes them fire one-at-a-time.) This allows the requests to execute in parallel, and thus quicker:

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
}