jQuery .each（）和ajax来获取大小

Question

我有php文件中的地址列表，文件按国家标记。 所以在名为uk的列表中，我可以有12个地址列表项。 但在我的主页上，我试图使用jQuery计算每个国家/地区的值，然后将该值放在该国家/地区地图上的div内，以便它表明英国是x地址，美国有x地址等等。

我在下面放在一起的代码一直工作到.ajax，然后在console.log中它回显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文件

<ul>
    <li>
        <strong>Company Name</strong>
        123 Fake Street<br />
        Fakesville<br />
        <a href="#">Link</a>
    </li>
    <li>
        <strong>Company Name</strong>
        123 Fake Street<br />
        Fakesville<br />
        <a href="#">Link</a>
    </li>
</ul>

的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]

Answer 1

您遇到的问题是该country不在您的success范围内。 调用success函数后，它会查找范围链以查找country 。 但是因为您的AJAX是异步运行的，所以循环将始终在调用success之前完成，因此country将始终是循环中设置的最后一个国家/地区。

要解决此问题，您需要需要你的巢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)
        }); 

这都是关闭的 。

Answer 2

使您的ajax请求同步。 添加async: false将起作用。 它将等待当前的ajax请求在启动另一个之前完成。 因此，对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());
        }
    }); 

}）;

Answer 3

这是一个闭包问题和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());

            }
        });