Вложенные циклы и новые дочерние элементы [дубликаты]

for (j = 0; j<z.length; j++) {
    $.getJSON(..., function (data) {
        $('#c' + j + '').append(...

Цикл выполняет z.length раз, запуская z.length AJAX-запросы и заканчивая с j, равным z.length завершающему цикл.

Затем, намного позже (потому что "A в AJAX означает" асинхронный "), запросы завершаются, и каждая из функций обратного вызова вызывается. Они используют j чтобы выбрать, к какому div добавить свои результаты. Но j все еще z.length поскольку он вернулся, когда цикл закончен. Создание функции с закрытием по переменной не означает, что значение переменной запоминается с точки, в которой была создана функция; каждая функция имеет ссылку на тот же j.

(На самом деле у вас нет закрытия вообще, потому что переменные цикла j и i не объявлены var, поэтому они являются случайными глобальными переменными.)

Вы можете вспомнить значение локальной переменной при создании функции, обернув ее в отдельную функцию с этой переменной в (или используя function.bind в ECMAScript 5). Простым способом сделать это является использование цикла на основе обратного вызова, а не for:

var places = [
    {id: 'location1', name: 'Location One'},
    ...
];

$.each(places, function(place_i, place) {
    var yql = 'SELECT * FROM rss WHERE url="http://xml.weather.yahoo.com/forecastrss/' + encodeURIComponent(place.id) + '_c.xml"';
    var div = $('<div/>').attr('id', 'c'+place_i)).text(place.name);
    $('#weatherData').append(div);

    $.ajax({
        url: 'http://query.yahooapis.com/v1/public/yql',
        data: {q: yql, format: 'json'},
        dataType: 'jsonp'
    ).done(function(json) {
        var forecasts = data.query.results.item.forecast;
        var table = $('<table style="border: none">'); // prefer class/stylesheet
        $.each(forecasts, function(forecast_i, forecast) {
            table.append($('<tr>').append(
                $('<td class="weather-date">').text(forecast.day)
            ).append(
                $('<td class="weather-icon">').css('background-position', forecast.code*-61 + 'px 0')
            ).append(
                $('<td class="weather-min">').text(forecast.low+'°')
            ).append(
                $('<td class="weather-max">').text(forecast.high+'°')
            ));
        });
        div.html(table);
    });
});

заметки:

• используйте автоматическое преобразование параметров данных jQuery, чтобы избежать необходимости называть encodeURIComponent вручную по URL-адресу JSON.

• избегайте склеивания содержимого HTML из строковых переменных. Он не подходит для специальных символов HTML и может создавать проблемы безопасности (XSS). Для настройки текстового содержимого используйте jQuery text().

• вам, вероятно, вообще не нужно указывать элемент id если вы сохраните ссылку на него в переменной JS, как это.