javascript - jQuery .each()和ajax获取大小

我在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]

最佳答案

您遇到的问题是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)
        });

全部与closures有关。

关于javascript - jQuery .each()和ajax获取大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14578564/