【昇順/降順で並べ替え】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つ目のサンプルでは、日付けごとに並べ替えているのですが、日付けの値を計算できるように一度ミリ秒に変換してあげる必要があります。以下の記事でもご紹介しているテクニックですね。
ミリ秒変換した値をdata-date属性でliに付与します。あとは1つめのサンプルと同じで、この値を使ってsort()メソッドで並べ替えています。
デモ
実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。
まとめ
完全に静的にベタ書きしているコンテンツであればご紹介した機能は必要ないかもしれませんが、jsonやxmlで読み込むコンテンツなどにおいて、それらの外部ファイル内でのコントロールが煩雑になるケースでこういった並べ替え機能が重宝します。
sort()メソッドを使ったコンテンツの並べ替えを行いたい場合は、どうぞ本記事をご参考にしていただければ幸いです。