(Rails) jQueryでHTMLの要素を並び替えたい

Question

• リスト### 前提・実現したいこと

TwitterのAPIを利用して複数のユーザーのツイートを取得し、タイムラインを作りたいと思っています。
Railsでユーザーのツイートを取得してくるところまでは実装したのですが、HTMLビューでツイートを表示すると順番が思い通りにいきません。
そこでHTMLの要素をJavaScriptで操作してツイートの順番を日付順(新しい順)に変えられないかと思っています。私はJavaScriot初心者なのでご教授頂けますと幸いです。
質問内容が伝わりづらく申し訳ありません。

発生している問題

HTMLはこのようになっています。

<div>ハロー 2018-12-28 06:21:22 </div>
<div>こんにちは 2018-12-23 08:01:04 </div>
<div>ニーハオ 2018-11-15 03:41:19 </div>
<div>こんばんは 2018-11-13 06:45:06 </div>
<div>おはよう 2018-11-13 06:40:51 </div>

今はとりあえずdiv要素でツイートを一つずつ囲んでいます。
これをJavaScriotでツイート時間順に並び替えることは可能でしょうか？

##Railsのビュー html.erb はこのようなイメージです。

<div> <%= @tweets[0].text %> <%= @tweets[0].created_at %> </div>
<div> <%= @tweets[1].text %> <%= @tweets[1].created_at %> </div>
<div> <%= @tweets[2].text %> <%= @tweets[2].created_at %> </div>
<div> <%= @tweets[3].text %> <%= @tweets[3].created_at %> </div>
<div> <%= @tweets[4].text %> <%= @tweets[4].created_at %> </div>

取得したツイートは tweets配列に入っています。

解決策を模索したのですが行き詰まりましたのでご質問させていただきます。
よろしくお願いします。

Answer 1

$( function() {
	var $_w = $( '.wrap' );
	var tmp = $_w.find( '>div' ).sort( function( a, b ) {
		return Date.parse( $( a ).data( 'date' ) ) - Date.parse( $( b ).data( 'date' ) );
	} );
	$_w.empty();
	tmp.each( function() {
		$_w.append( this );
	} );
} );
```**動くサンプル：**[https://jsfiddle.net/au1w5bh4/2/](https://jsfiddle.net/au1w5bh4/2/)

---

【[JS] Javascript (+jQuery)で要素をソートする - Qiita】
[https://qiita.com/jshimazu/items/025f1a9b28592d26a632](https://qiita.com/jshimazu/items/025f1a9b28592d26a632)

【【JS】要素をランダムに並び替えるのを福岡一わかりやすく解説します | 福岡 web・ホームページ制作 Eight】
[https://eight-web.com/blog/2017/08/10/javascript-random/](https://eight-web.com/blog/2017/08/10/javascript-random/)

【DOMを中の値でソートする - Qiita】
[https://qiita.com/fernet/items/e26ac711f12406d8a573](https://qiita.com/fernet/items/e26ac711f12406d8a573)

【JavaScript の Date は罠が多すぎる - Qiita】
[https://qiita.com/labocho/items/5fbaa0491b67221419b4](https://qiita.com/labocho/items/5fbaa0491b67221419b4)

Comments

[tailer]

迅速なご回答ありがとうございます！
さっそく試してみたのですが並び替えが上手く反映されませんでした。

もしかするとUTCという文字が問題なのでしょうか(--;)
はじめの質問にUTCを書き忘れてしまい申し訳ありません。

```html:
<div class="wrap">
<div data-date="2018-12-28 06:21:22 UTC">ハロー 2018-12-28 06:21:22 </div>
<div data-date="2018-12-23 08:01:04 UTC">こんにちは 2018-12-23 08:01:04 </div>
<div data-date="2018-11-15 03:41:19 UTC">ニーハオ 2018-11-15 03:41:19 </div>
<div data-date="2018-11-13 06:45:06 UTC">こんばんは 2018-11-13 06:45:06 </div>
<div data-date="2018-11-13 06:40:51 UTC">おはよう 2018-11-13 06:40:51 </div>
</div>
```

またはビューファイルでユーザーの数だけツイートを表示している繰り返し処理に問題があるのでしょうか(--;)

```ruby:
<% user_num = @users.length %>
<% number = 0 %>

<div class="wrap">
<% user_num.times do %>
<div data-date="<%= @tweets[number].created_at %>">
<%= @tweets[number].text %>
<%= @tweets[number].created_at %>
</div>
<% number += 1 %>
<% end %>
</div>
```

ご回答いただけると幸いです

[tailer]

もう一度試したところ並び替わりました！
私が何か間違えていたようです。

しかし次は順番が逆になってしまっている(日付の古いものが上)という問題が発生しました。
次から次へと問題が起こってパニックです(^^;)

順番を逆にする場合の処理を教えていただけますと助かります。

[kei344]

rubyは不勉強なのでよくわかりませんが、出力時にGMTに変換してしまえばよいと思います。
また、ソートも出力前でいいような気もします。

JavaScriptで処理するなら、「UTC」を置換してしまうのが早いでしょう。ソートの比較に使うだけなので特に問題は無いと思います。今後正確な日付処理に使うことがあるなら、Date.UTC()とかを使うことになると思います。

【Date.UTC() | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC

【DBの日時がUTCのときにJavaScriptのDateで罠にハマった。 - Qiita】
https://qiita.com/watanuki_p/items/67eebb01c49837d563e4

[tailer]

ソートの比較の処理を検索して自己解決できました！！
素晴らしい回答本当にありがとうございました！
teratailは初めての利用でしたが丁寧な回答に感動しました！
今後はJavaScriptの勉強もしようと思います^^