【jQuery】要素を最上部に移動させる

今回はjsです

jsを知れば知るほどjQueryって便利なんだなぁとつくづく感じている所です

本題！

要素を最上部に移動させる

たった1行で実行できました

javascripts/channels/talk_room

$('.talk__friends--list').prepend($('.talk-room-' + data["talk_room_id"]));

ざっくり書くと

$('入れ物').prepend('追加したい要素')

で、追加したい要素を入れ物の一番上に表示させる感じです

もし、すでに追加したい要素がある場合は、すでに要素は消えて上部に追加されます
(removeとか使ってしまって永遠に消えたりしてました...)

実際の動きはこんな感じです

名前がdddの人とのトークが一番上になりました

ついでに、一番新しいトーク内容を表示させて、時間も一緒に出します

      # トークの追加があったトークルームを最上段に表示させる
      $('.talk__friends--list').prepend($('.talk-room-' + data["talk_room_id"]));
      # 内容を書き換える
      $('.talk-room-' + data["talk_room_id"]).find(
        $('#latest-talk').html('<span class="latest-talk-show__name-display--display">'+
                                                data["talk"]+
                                            '</span>')
      )
      # 時間も書き換える
      $('#data-time').html('<span id="data-time">'+
                              data["created_at"]+
                            '</span>')

ActionCableでchannelのreceived: 部分に書いてあるので、受け取った相手も同じ動きをしてくれます

あとは未読メッセージでカウントを表示とかさせればよりわかりやすくなりますね

またボチボチ更新していきます