JavaScriptの並び替え
JavaScriptには配列を並び替えるための関数 sort が用意されてますが、あまり思うようにはいきません・・・
var list = [ 'Japan', 'England', 'America' ]; list.sort(); console.log(list); // [ "America", "England", "Japan" ]
と、なりますが、
var list = [ 80, 4000, 10, 600 ]; list.sort(); console.log(list); // [ 10, 4000, 600, 80 ]
と、なってしまいます。
sort 関数はアルファベットで並び替える仕様になっているので数値の大きさでは比較してくれません・・・
数値の大きさで比較したい場合は、下記のような関数を sort 関数の引数に渡してあげる事で解決します。
var list = [ 80, 4000, 10, 600 ];
list.sort( function( a, b )
{
if( a < b ) return -1;
if( a > b ) return 1;
return 0;
});
console.log(list); // [ 10, 80, 600, 4000 ]
これで数値が小さい順に並びました。
比較により返す値を入れ替えれば、数値が大きい順で並びます。
さてさて、本題です。
先日、イベント情報を配信するサイトで悩んでしまったのでメモしときます。
内容は
・最新（降順）の５件を抽出
・抽出した５件は昇順で並べる
と、何を悩むのか・・・なんだけど、詳しく書くと
・公開日付が新しいもの（降順）から５件を抽出
・抽出した５件のイベント日をキーに昇順で並べる
・もちろん公開日付とイベント日付は異なります
です。
公開日付に関しては、HTMLを生成する際にシステム側でなんとでもなっちゃいます。
例えばこんな感じです。
<ul> <li>2013年12月01日<strong>イベント名</strong></li> <li>2013年11月25日<strong>イベント名</strong></li> <li>2013年11月23日<strong>イベント名</strong></li> <li>2013年11月20日<strong>イベント名</strong></li> <li>2013年11月24日<strong>イベント名</strong></li> </ul>
これじゃぁ〜駄目ですよね・・・
ただし、イベントの日付は補足情報でしかなく、システムにそれをキーとして扱って〜とは言えません・・・
そこで<LI>タグに属性を追加してみます。
<ul> <li data-date="20131201">2013年12月01日<strong>イベント名</strong></li> <li data-date="20131125">2013年11月25日<strong>イベント名</strong></li> <li data-date="20131123">2013年11月23日<strong>イベント名</strong></li> <li data-date="20131120">2013年11月20日<strong>イベント名</strong></li> <li data-date="20131124">2013年11月24日<strong>イベント名</strong></li> </ul>
これでページを読み込んだタイミングでDOM操作などを行ってなんとか出来そうだ!!
まずは、こんな感じでオブジェクト型の配列を作ってみます。
var li = $('ul li');
var list = [];
var i = 0;
while( i < li.length ){
list.push({
date: parseInt( $(li[i]).attr('data-date'), 10 ),
element: li[i]
});
i++;
}
あとは、DOM操作などで<UL>タグを空っぽにして、お題の並び替えを行い、<LI>タグを戻していく。
そんな流れでいけそうです。
配列内のオブジェクトのキーに対する値を基準に配列を並び替える方法
list.sort( function( a, b )
{
var adate = a['date'];
var bdate = b['date'];
if( adate < bdate ) return -1;
if( adate > bdate ) return 1;
return 0;
});
あらま、なんと単純!!
これでイベントの日付が古い順に並びました。
比較により返す値を入れ替えれば、降順で並びます。
JavaScriptを覚えるなら
 | 新品価格 |
