带有AJAX的jquery.each()目标元素始终针对循环中的最后一项

Question

我有一个 unordered list，我正在循环通过 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

to

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