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

Category : jQuery

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

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

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

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

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

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

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

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

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

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

Leave a Reply