jQueryを使って要素を並べ替えるサンプル


20100320-02
Sorting elements with jQuery」にてテーブルやリストのソートの作り方を紹介していました。

指定したエレメントを並べ替えたり、並び替えのルールを自分で作り込みができるため、実務で使う場合に良さそうです。

詳しくは以下

IT/WEB業界への転職なら求人サイトGreen

並び替え方法などの自由なカスタマイズが可能

jQueryでテーブルをソートさせるプラグインはいくつかありますが、デザインが入っていたり、並び替え方法のカスタマイズが難しかったりして実務で使えるものは少なかったと思います。

以下のような設定で実装できるようです。

htmlは単純なリスト要素で作成します。

<ul>
    <li>Banana</li>
    <li>Carrot</li>
    <li>Apple</li>
</ul>

並び替えのルールは自前で構築する必要があります。
アルファベット順にする場合

$('li').sort(function(a, b){
    return $(a).text() > $(b).text() ? 1 : -1;
});

数値順にする場合

$('li').sort(function(a, b){
    return  (isNaN(a) || isNaN(b) ?
        a > b : +a > +b
    ) ?
        inverse ? -1 : 1 :
        inverse ? 1 : -1;
});

並び替えをJavaScriptで実現したい場合にいかがでしょうか。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

follow us in feedly