"> "> " />

jQuery .each () и ajax для получения размера

У меня есть списки адресов внутри php-файлов, и файлы помечены по странам. Поэтому в списке под названием uk у меня могло быть 12 элементов списка адресов. Но на моей домашней странице я пытаюсь использовать jQuery для вычисления значений каждой страны, а затем поместить значение внутри div на эту карту страны, чтобы он указывал, что uk был x-адресами, usa имеет x-адреса и так далее.

Код, который я собрал ниже, работает до .ajax, а затем в console.log это echos 1 отдельная страна, а не список стран.

<Сильный> HTML

<div class="right map">
    <div class="canada" data-name="Canada"></div>
    <div class="usa" data-name="USA"></div>
    <div class="uk" data-name="UK"></div>
    <div class="ireland" data-name="Ireland"></div>
    <div class="spain" data-name="Spain"></div>
    <div class="portugal" data-name="Portugal"></div>
    <div class="italy" data-name="Italy"></div>
    <div class="australia" data-name="Australia"></div>
</div>

<Сильный> jQuery

$('.map div').each(function() { 
    $this = $(this);
    country = $this.attr("class");
    console.log(country);
    $.ajax({
        url : "/assets/inc/coe/"+country+".php",
            success : function (data) {
                console.log($('.map div.'+country));
                $('.map div.'+country).text($(data).find('li').size());
            }
        }); 
});

php-файлы

  • Company Name 123 Fake Street
    Fakesville
    Link
  • Company Name 123 Fake Street
    Fakesville
    Link

<Сильный> console.log

canada
usa
uk
ireland
spain
portugal
italy
australia
[div.australia]
[div.australia]
[div.australia]
[div.australia]
[div.australia]
[div.australia]
[div.australia]
[div.australia]
1
nl ja de

3 ответы

Проблема, с которой вы сталкиваетесь, заключается в том, что страна не входит в объем вашей функции success . Когда вызывается функция success , она ищет цепочку областей видимости, чтобы найти country . Но поскольку ваш AJAX работает асинхронно, цикл всегда будет завершен до того, как будет задействован success , а country будет поэтому always быть последней страной, установленной в петля.

Чтобы устранить эту проблему, вам нужно будет установить функцию success на новый уровень видимости и перейти в country по значению. В моем примере ниже я выполняю это с помощью функции немедленного выполнения, которая возвращает исходную функцию success :

Измените это:

$.ajax({
        url : "/assets/inc/coe/"+country+".php",
            success : function (data) {
                console.log($('.map div.'+country));
                $('.map div.'+country).text($(data).find('li').size());
            }
        }); 

К этому:

$.ajax({
        url : "/assets/inc/coe/"+country+".php",
            success : (function (country) {
                return function(data) {
                    console.log($('.map div.'+country));
                    $('.map div.'+country).text($(data).find('li').size());
                };
            })(country)
        }); 

Все дело в закрытии .

3
добавлено

Make your ajax request synchronous. Adding async: false will work. It will wait for the current ajax request to get finished before starting another. So the reference to country will correctly map to the correct country div

$('.map div').each(function() { 
$this = $(this);
country = $this.attr("class");
console.log(country);
$.ajax({
    url : "/assets/inc/coe/"+country+".php",
    async: false,
        success : function (data) {
            console.log($('.map div.'+country));
            $('.map div.'+country).text($(data).find('li').size());
        }
    }); 

});

1
добавлено
@DonaldSutherland: хотя это решение должно работать, помните, что при установке async: false , который ваш пользовательский интерфейс будет блокировать во время каждого отдельного запроса. Если запрос затем займет немного времени, это может показаться пользователю, как браузер заморожен.
добавлено автор Nope, источник
@DonaldSutherland Ответ Elliot B будет лучше
добавлено автор DON, источник

Это проблема закрытия и асинхронность ajax; он получил ручку по переменной страны, которая превосходит все вызовы ajax, поэтому ее всегда в последней настройке (австралия).

Напишите новое свойство функции/объекта ajax

$.ajax({
        url : "/assets/inc/coe/"+country+".php",
        country: country,
            success : function (data) {
                var country = this.country;
                console.log($('.map div.'+country));
                $('.map div.'+country).text($(data).find('li').size());

            }
        }); 
0
добавлено
@markdown, счастлив быть просвещенным ...
добавлено автор jenson-button-event, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском