日付区切りでメッセージを並べ替え

Question

jqueryとfirestoreに基づいてチャットを作成しています.Snapshotのメッセージを日付順に取得できるようになっていますが、現在はチャットを開いたときに日分割を追加しようとしています彼は毎日分周器を見つけて、各分周器の下でこのメッセージが現れます。

これは私のコードです：ここでは

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

     }); 

は私が何を得るからのスクリーンショットですが、私はお互いがメッセージをseperatingない後の日付仕切りを得ました。 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()); 
     }) 

    });