javascript - jQuery.each() 带有 ajax 的目标元素，始终以循环中的最后一项为目标

Question

我有一个无序列表，我正在遍历 ul 的每个 li 子级:

<ul>
<li value="1">Item 1</li>
<li value="2">Item 2</li>
<li value="3">Item 3</li>
<li value="4">Item 4</li>
<li value="5">Item 5</li>
<ul>

<script>
    $(function(){
        $("ul").children("li").each(function(idx, el){
            e = $(el); // Assign the element

             $.ajax({
            type: "POST",
            url: "/_ajax/_myService.svc/getRandomNumber",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {                    
                e.text(e.text() + " (" + msg.d + ")")
            }
        });
    });
</script>

因此 AJAX 函数返回一个随机数(目前)并将其附加到 li 文本末尾的方括号中。

如果我将 ajax 调用设置为 async: false 它会起作用，但是由于卡住浏览器等原因不推荐这样做。如果我将其默认设置为 true 那么所有项目都附加到循环中的最后一项，所以我最终得到:

<ul>
<li value="1">Item 1</li>
<li value="2">Item 2</li>
<li value="3">Item 3</li>
<li value="4">Item 4</li>
<li value="5")Item 5 (12) (234) (1334) (14) (34)</li>
</ul>

如何获取 ajax 调用以维护它的目标引用？我试过将调用放入一个单独的函数中，但我得到了相同的结果!

Answer 1

改变

 e = $(el); // Assign the element

到

var  e = $(el); // Assign the element