Unformed Building

jQueryを使ってボタンクリックでリストの並び順を逆にする

公開:
更新:

パーマリンク

切り替えボタンを押すとリストの並び順を逆にするだけのスクリプトを書いてみました。
分かりやすくするためにリストを使っていますが、他の要素でも問題ないと思います。

ブログのコメント欄を作っているときにコメントの並び順を新着順にしてくれと言われて作ったんですが、ブログのコメントって普通は投稿順(古い順ね)に並んでいるから違和感があったんですね。
それで「どうせなら閲覧者が切り替えできるようにすればいいんじゃね?」って考えて、これを作ることにしました。

まず、一番最初に作ったもの。
これは『jsdo.it』で書きました。

クリックでリストの並び順を逆に - jsdo.it - share JavaScript, HTML5 and CSS

HTMLは普通のリストですね。
jQuery部分ですが、ol#reversibleの子要素をtoArray()で配列にし、reverse()で逆順に。
そしてol#reversibleの子要素をいったん空にして、append()でさっき作った逆順のリストを追加しています。

最初はget()してreverse()してforでやるのかなーって思ってたんですが、アドバイスを頂けたのでそちらを参考にしつつ作りました。

それと、あとからちょっとだけコードを追加したものが以下。

jQueryを使ってボタンクリックでリストの並び順を逆にする DEMO

デモファイルをダウンロード

こっちはボタンのテキストがちょっと変わるだけですw
本当にそれだけ。

これらをベースに作っていけばいいかな、と。
アドバイスしてくださった@GeckoTang@wokamoto、お二人ともありがとうございました。