Javascript 按日期分隔符对邮件排序

我正在构建一个基于jquery和firestore的聊天室，我成功地在Napshot上按日期排序检索消息，但现在我尝试按天添加一个日期分隔符，因此当用户打开聊天室时，他会发现每天都有一个分隔符，在每个分隔符下，消息都发生在这一天

这是我的代码：

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

        });

firestore.collection（“chat”）.orderBy（“date”、“desc”）.limit（10）.onSnapshot（函数（快照）{
$（“.messages”）.html（“”）；
var curUser=''；
var curDate=''；
var curDay=''；
snapshot.forEach（函数（文档）{
log（“djsidoisjdis”）；
$（“.chat content”）.animate（{scrollTop:$（'.chat content'）.prop（“scrollHeight”）}，100）；
if（curDate！==doc.data（）.date.toLocaleDateString（））{
curDate=doc.data（）.date.toLocaleDateString（）；
$（“.messages”）.append（“”+doc.data（）.date.toLocaleDateString（）+“”）；
}
if（doc.data（）.user_name！=用户名）{
//我的留言
if（doc.data（）.user_name！==curUser）{
//显示用户名
curUser=doc.data（）.user\u name；
$（“.messages”）.append（“
+doc.data（）.user_name+”
“+doc.data（）.date+”
+doc.data（）.message+”；
}否则{
//显示没有用户名的消息
$（“.messages”）.append（“
'+doc.data（）.date+”
“+doc.data（）.message+”）；
}
}否则{
//其他用户信息
if（doc.data（）.user_name！==curUser）{
//显示带有用户名的消息：
curUser=doc.data（）.user\u name；
$（“.messages”）.append（“
'+doc.data（）.date+”
+doc.data（）.user(name+”
+doc.data（）.message+”；
}否则{
//显示没有用户名的消息：
$（“.messages”）.append（“
'+doc.data（）.date+”
'+doc.data（）.message+”；
}
}
});
变量列表=$（'.messages'）；
var listItems=list.children（'ul.message'）；
追加（listItems.get（）.reverse（））；
});

这是我得到的一个截图，我得到了一个日期分隔符，在彼此没有分开消息之后。

---

您的问题在于此代码：

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

此代码仅从

.messages

中获取UL元素，将其反向排序并附加到列表的末尾，将日期H1标题保持在列表的顶部

如果要对日期组和每个组中的聊天信息进行反向排序，则需要稍微更改标记以包装日期组，然后首先对日期组和每个组的信息进行反向排序。您的标记和代码应如下所示：

变量列表=$（'.messages'）；
var listItems=list.children（'.dategroup'）；
追加（listItems.get（）.reverse（））；
$（'.dategroup'）。每个（函数（）{
var ullist=$（this.children（'ul.message'））
$（this.append（ullist.get（）.reverse（））；
})

日期1
聊天项目1
聊天项目2
日期2
聊天项目3
聊天项目4

你能分享你的json摘录吗。。在您的示例中，

snapshot

@KresimirPendic我没有在这个函数中包含json，现在用户名被定义为静态变量。由于我只想对firestore中的消息进行分隔日期排序，但这将在每条消息上添加日期，而不检查当前日期，因此我只想在日期与当前日期不同时显示日期，如“新的一天”！这是一个如何对标记进行排序的示例。关于如何将示例应用于代码，请参见我的编辑-否，它只显示一次日期