按日期分類器對郵件進行排序

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

    });