按日期分隔符对消息进行排序

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 标题保持在列表顶部。

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

 
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());
       })

    });