【昇順/降順で並べ替え】sort()メソッドを使ってコンテンツを並べ替えるjs

Web2017年7月26日

数字や日付けのリスト要素をjsで並べ替えたい場合、sort()メソッドを活用するととても便利です。本記事では、sort()メソッドを利用して並べ替えを行うテクニックをご紹介させていただきたいと思います。

サンプルコード①（数字を並べ替え）

js

$('ul.demo-01').each(function(){
    $(this).html(
        $(this).find('li').sort(function(a,b){
            return $(b).text() - $(a).text();
        })
    );
});

※jQueryを読み込んでいる場合のスクリプトとなります

html

<ul class="demo-01">
<li>500</li>
<li>100</li>
<li>1500</li>
<li>2500</li>
<li>2000</li>
</ul>

サンプルコード②（日付けを並べ替え）

js

$('ul.demo-03 li').each(function(){
    //日付けをミリ秒変換してdate-date属性を付与
    var $date = $(this).text();
    dateFunc = function(){
        $date = $date.replace(/-| /g, ':').split(':');
        $date = new Date($date[0], $date[1] - 1, $date[2], $date[3], $date[4], $date[5]);
        return $date;
    };
    dateFunc($date);
    $date = $date.getTime();
    $(this).attr('data-date',$date);
});
$('ul.demo-03').each(function(){
    $(this).html(
        $(this).find('li').sort(function(a,b){
            return $(b).attr("data-date") - $(a).attr('data-date');
        })
    );
})

※jQueryを読み込んでいる場合のスクリプトとなります

html

<ul class="demo-03">
<li>2017-10-26 00:00:00</li>
<li>2017-07-26 00:00:00</li>
<li>2017-11-26 00:00:00</li>
<li>2017-09-26 00:00:00</li>
<li>2017-12-26 00:00:00</li>
<li>2017-08-26 00:00:00</li>
</ul>

解説

どちらのサンプルも、sort()メソッドの中で2つの引数（aとb）を指定して各要素の値を2つ取り出して関数に引数として渡すことで、関数が返す値に応じて並べ替えを行います。「-」演算子を使うと対象の値は数値に変換され、減算した結果を戻り値とし、プラスかマイナスのいずれかを返すことになります。正確に理解する必要はありません、ただ「こういうもの」として覚えておいても大丈夫です。

1つ目のサンプルでは、jQueryのhtml()の中でsort()メソッドを実行することで、並べ替えを行っています。サンプルでは昇順に並べ替えていますが、(a)と(b)を逆にすれば簡単に降順にすることもできます。

2つ目のサンプルでは、日付けごとに並べ替えているのですが、日付けの値を計算できるように一度ミリ秒に変換してあげる必要があります。以下の記事でもご紹介しているテクニックですね。