来自循环的 JQuery 内容最后追加答案

【问题标题】：JQuery content from loop appends last来自循环的 JQuery 内容最后追加
【发布时间】：2013-08-24 23:08:56
【问题描述】：

基本上我需要附加页眉、内容和页脚消息。

内容来自循环，由于某种原因，它最后附加。

    function sendMail(){

    $("#textareaContainer").append('<textarea id="someTextarea" rows=12 class="span7">Some header text that is needed</textarea>');

    for (var i=0;i<idToUse.length;i++){
        $.post("actions.php", "do=contentFromPhp"+"&id="+idToUse[i],0,"json").done(function(result) {
        for (var i=0;i<result.length;i++){
        $("#someTextarea").append("\r"+result[i].theContent);
        }
    idToUse = [];
    });

    }
    $("#someTextarea").append("\rSome footer text that is needed!");

}

当前输出为：

Some header text that is needed
Some footer text that is needed!
Content From loop 1
Content From loop 2

我需要它：

Some header text that is needed
Content From loop 1
Content From loop 2
Some footer text that is needed!

【问题讨论】：

标签： jquery loops for-loop jquery-append

【解决方案1】：

这是因为您使用 ajax 来填充数据，注意：即使这样也可能不会给出确切的结果，因为 ajax 请求可能会以不同的顺序返回

function sendMail(){

    $("#textareaContainer").append('<textarea id="someTextarea" rows=12 class="span7">Some header text that is needed</textarea>');

    var xhrs = [], xhr;
    for (var i=0;i<idToUse.length;i++){
        xhr = $.post("actions.php", "do=contentFromPhp"+"&id="+idToUse[i],0,"json").done(function(result) {
            for (var i=0;i<result.length;i++){
                $("#someTextarea").append("\r"+result[i].theContent);
            }
            idToUse = [];
        });
        xhrs.push(xhr)
    }

    $.when.apply($, xhrs).then(function(){
        $("#someTextarea").append("\rSome footer text that is needed!");
    })

}

【讨论】：

【解决方案2】：

需要在 AJAX 回调函数中追加页脚：

for (var i=0;i<idToUse.length;i++){
    $.post("actions.php", {
        do: "contentFromPhp",
        id: idToUse[i]
    }, 0, "json").done(function(result) {
        for (var i=0;i<result.length;i++){
            $("#someTextarea").append("\r"+result[i].theContent);
        }
        $("#someTextarea").append("\rSome footer text that is needed!");
        idToUse = [];
    });
}

我还将您的数据从字符串更改为对象，以便 jQuery 正确地对其进行 URL 编码。

【讨论】：