MS Access Tips/Sample and VBA and Blog customize etc...

jQueryで複数リストの要素を並べ替える

当ブログではカテゴリー別の記事一覧をツリー表示させています。この各カテゴリー内の記事の並び順を「新着順」と「人気順」で切り替えられるようにしています。

このように階層化されたリスト項目の要素を並べ替える jQueryコードを紹介します。

jQueryでSiteMapをソート

難易度:

HTML

下記のように複数のリストがあるとします。

jQuery

JavaScript、jQuery、両者を使って要素を並べ替える - すたら日記

上記を参考に各リストの要素がid属性の降順で並べ替えられるのを期待して、下記のようなコードを書いて実験してみました。

リストが一つだけのときはこれでいいのですが、複数あるとすべてのリストの要素が合体してしまって失敗です。

複数リストソート失敗

リストにid属性を付加してID名で参照する様にしてリストの数だけ上記のコードを繰り返し記述すればいいのですが、リスト数が多いと面倒です。このようなときは、jQuery では each を使うと簡単に一つにまとめることができます。

これでリスト毎にソートされるようになりました。

複数リストソート成功

class属性で並べ替えたい時は、sortのコールバックの比較関数をclassを参照する様に書き換えます。

並べ替えの種類が多かったり、他の個所でも使用するとき、同じコードの繰り返しになるのは、ちょっと悔しいので、比較関数を引数に設定できる汎用関数にしてみました。

それぞれのボタンクリックで id属性で降順、class属性で昇順、テキストで昇順 の並べ替えをします。

jQuery を使用してますので、当然、jQueryを事前に読み込んでおく必要があります。

サンプルページ


拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/385-dda651a5
該当の記事は見つかりませんでした。