从函数运行时，Jquery 追加不按顺序添加 div

Question

当我的 ajax 请求返回成功时，我要做的是继续将 div 附加到 #ajax_tweets。当前发生的是每次在计时器上运行 ajax 函数并且 ajax 返回成功时，所需的最新 div 正确显示在屏幕上。但是，当它下次运行时，前一个 div 将被覆盖并且也不会附加。要么我附加不正确，要么我不确定......现在让我发疯了一段时间。

提前谢谢你。

我的代码：

$(document).ready(function() {
    window.setInterval(ajax_test, 10000);
    counter = 0;

    function ajax_test() {
        $(".tweets").html('Retrieving...');
        $.ajax({
            type: "POST",
            url: "assets/ajax/get_latest_tweets.php",
            data: "tid=" + id,
            timeout: 20000,
            success: function(msg) {
                if (msg != "") {
                    add_to_tweet_feed( msg );
                    id++;
                    alert(id + msg);
                }     
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $(".tweets").html('Timeout contacting server..');
            }
        });
    }

    function add_to_tweet_feed ( msg ) {
        $("#ajax_tweets").append(msg);  
    }
});

从服务器返回的代码：

<div id="'.$tid.'" class="t_feed">             
                               <div class="calander right">
                                <div class="calander_month"><span>'.$row['pub_month'].'</span></div>
                                <div class="calander_day"><span>'.$row['pub_day'].'</span> </div> 
                               </div>
                                <span class="ajax_tweet bold">'.$row['source'].'</span>
                                <p>'.$tweet.'</p>
                              </div><div class="clear_both></div>

前端代码：

           <div id="ajax_tweets" class="tweets">

           </div>

Answer 1

代码中的这一行实际上清除了整个容器，这就是为什么你只有最后一个容器：

$(".tweets").html('Retrieving...');

一种解决方案可能是让您的标记如下所示：

<div id="ajax_tweets" class="tweets">
    <div id="ajax_message"></div>
</div>

...并更改您的代码以更新该元素并在其前面插入新推文：

$(document).ready(function() {
    window.setInterval(ajax_test, 10000);
    counter = 0;

    var $message = $("#ajax_message");

    function ajax_test() {
        $message.html('Retrieving...');
        $.ajax({
            type: "POST",
            url: "assets/ajax/get_latest_tweets.php",
            data: "tid=" + id,
            timeout: 20000,
            success: function(msg) {
                $message.html('');
                if (msg != "") {
                    add_to_tweet_feed( msg );
                    id++;
                }     
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $message.html('Timeout contacting server..');
            }
        });
    }

    function add_to_tweet_feed ( msg ) {
        $(msg).insertBefore($message);
    }
});

编辑： 修复了上述代码中的一个错误（insertBefore() 的错误用法）。此外，如果您担心请求返回的顺序，您可以添加占位符并在成功时替换它们或在失败时删除它们：

$(document).ready(function() {
    window.setInterval(ajax_test, 10000);
    counter = 0;

    var $message = $("#ajax_message");

    function ajax_test() {
        $message.html('Retrieving...');

        var $placeholder = $('<div></div>').insertBefore($message).hide();

        $.ajax({
            type: "POST",
            url: "assets/ajax/get_latest_tweets.php",
            data: "tid=" + id,
            timeout: 20000,
            success: function(msg) {
                $message.html('');
                if (msg != "") {
                    add_to_tweet_feed(msg, $placeholder);
                    id++;
                }     
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $placeholder.remove();
                $message.html('Timeout contacting server..');
            }
        });
    }

    function add_to_tweet_feed (msg, $placeholder) {
        $placeholder.show().replaceWith(msg);
    }
});