按日期分隔符排序消息

Question

我正在构建基于jquery和firestore的聊天，我设法检索按日期排序的消息onSnapshot，但现在我正在尝试按日添加日期分隔符，所以当用户打开聊天时他会找到一个分隔符对于每一天和每个分频器下的消息发生在这一天。

这是我的代码：

firestore.collection("chat").orderBy("date","desc").limit(10).onSnapshot(function(snapshot) {       

            $(".messages").html('');

            var curUser = '';
            var curDate = '';
            var curDay = '';
            snapshot.forEach(function(doc) {
                console.log("djsidjsdoisjdis");
                 $(".chat-content").animate({ scrollTop: $('.chat-content').prop("scrollHeight")}, 100); 

               if(curDate!== doc.data().date.toLocaleDateString()){
                   curDate=doc.data().date.toLocaleDateString();
                   $(".messages").append('<h1>'+doc.data().date.toLocaleDateString()+'</h1>');  
                   }

                if(doc.data().user_name != username){
                    // My message

                    if(doc.data().user_name !== curUser) {
                        // SHOW USER NAME
                        curUser = doc.data().user_name;
                        $(".messages").append('<ul class="message message-received message-appear-from-bottom message-appeared message-first message-last message-with-tail"><li class="message-name">'+doc.data().user_name+'</li><li id="message-date" class="hide">'+doc.data().date+'</li><li class="message-text">'+doc.data().message+'</li></ul>');
                    } else {
                        // SHOW MESSAGE WITHOUT USERNAME
                        $(".messages").append('<ul class="message message-received message-appear-from-bottom message-appeared message-first message-last message-with-tail"><li id="message-date" class="hide">'+doc.data().date+'</li><li class="message-text">'+doc.data().message+'</li></ul>');
                    }
                } else {
                    // other users messages
                    if(doc.data().user_name !== curUser) {
                        // Show messsgae with user name:
                        curUser = doc.data().user_name;
                        $(".messages").append('<ul class="message message-sent message-first message-last message-with-tail message-appear-from-bottom message-appeared"><li id="message-date" class="hide">'+doc.data().date+'</li><li class="message-name">'+doc.data().user_name+'</li><li class="message-text">'+doc.data().message+'</li></ul>');
                    } else {
                        // Show message without user name:
                        $(".messages").append('<ul class="message message-sent message-first message-last message-with-tail message-appear-from-bottom message-appeared"><li id="message-date" class="hide">'+doc.data().date+'</li><li class="message-text">'+doc.data().message+'</li></ul>');

                    }
                }


            });
            var list = $('.messages');
                var listItems = list.children('ul.message');
                list.append(listItems.get().reverse());

        });

这是我得到的截图，我得到了日期分隔符，彼此不分离消息。 chat

Answer 1

您的问题在于此代码：

var list = $('.messages');
var listItems = list.children('ul.message');
list.append(listItems.get().reverse());

此代码仅使用.messages中的UL元素，将它们反向排序并附加到列表末尾，将日期H1标题保留在列表顶部。

如果要反向排序日期组以及每组中的聊天消息，则需要稍微更改标记以包装日期组，然后首先反向排序日期组，然后对每个组的消息进行排序。你的标记＆amp;代码应该是这样的：

 
var list = $('.messages');
var listItems = list.children('.dategroup');
list.append(listItems.get().reverse());

$('.dategroup').each(function(){
   var ullist = $(this).children('ul.message')
   $(this).append(ullist.get().reverse());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="messages">
    <div class="dategroup">
       <h1>DATE 1</h1>
       <ul class="message message-sent message-first message-last message-with-tail message-appear-from-bottom message-appeared"><li>chatitem 1 </li></ul> 
       <ul class="message message-sent message-first message-last message-with-tail message-appear-from-bottom message-appeared"><li>chatitem 2</li></ul> 
    </div>
    <div class="dategroup">
       <h1>DATE 2</h1>
       <ul class="message message-sent message-first message-last message-with-tail message-appear-from-bottom message-appeared"><li>chatitem 3</li></ul> 
       <ul class="message message-sent message-first message-last message-with-tail message-appear-from-bottom message-appeared"><li>chatitem 4</li></ul> 
    </div>
</div>

修改

将此示例应用于您的代码：

    firestore.collection("chat").orderBy("date","desc").limit(10).onSnapshot(function(snapshot) {       

        $(".messages").html('');

        var curUser = '';
        var curDate = '';
        var curDay = '';
        snapshot.forEach(function(doc) {
            console.log("djsidjsdoisjdis");
             $(".chat-content").animate({ scrollTop: $('.chat-content').prop("scrollHeight")}, 100); 

           if(curDate!== doc.data().date.toLocaleDateString()){
               curDate=doc.data().date.toLocaleDateString();
               var $dateGroup = $("<div class='dategroup'></div>")
               $('.messages').append($dateGroup)
               $dateGroup.append('<h1>'+doc.data().date.toLocaleDateString()+'</h1>');  
           }

            if(doc.data().user_name != username){
                // My message

                if(doc.data().user_name !== curUser) {
                    // SHOW USER NAME
                    curUser = doc.data().user_name;
                    $dateGroup.append('<ul class="message message-received message-appear-from-bottom message-appeared message-first message-last message-with-tail"><li class="message-name">'+doc.data().user_name+'</li><li id="message-date" class="hide">'+doc.data().date+'</li><li class="message-text">'+doc.data().message+'</li></ul>');
                } else {
                    // SHOW MESSAGE WITHOUT USERNAME
                    $dateGroup.append('<ul class="message message-received message-appear-from-bottom message-appeared message-first message-last message-with-tail"><li id="message-date" class="hide">'+doc.data().date+'</li><li class="message-text">'+doc.data().message+'</li></ul>');
                }
            } else {
                // other users messages
                if(doc.data().user_name !== curUser) {
                    // Show messsgae with user name:
                    curUser = doc.data().user_name;
                    $dateGroup.append('<ul class="message message-sent message-first message-last message-with-tail message-appear-from-bottom message-appeared"><li id="message-date" class="hide">'+doc.data().date+'</li><li class="message-name">'+doc.data().user_name+'</li><li class="message-text">'+doc.data().message+'</li></ul>');
                } else {
                    // Show message without user name:
                    $dateGroup.append('<ul class="message message-sent message-first message-last message-with-tail message-appear-from-bottom message-appeared"><li id="message-date" class="hide">'+doc.data().date+'</li><li class="message-text">'+doc.data().message+'</li></ul>');

                }
            }


        });
        var list = $('.messages');
        var listItems = list.children('.dategroup');
        list.append(listItems.get().reverse());

        $('.dategroup').each(function(){
           var ullist = $(this).children('ul.message')
           $(this).append(ullist.get().reverse());
       })

    });