按日期分类器对邮件进行排序

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的UI元素，相反对它们进行排序并添加到列表的末尾，在保持日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()); 
     }) 

    });