お世話になっております。
javascript初心者です。
以下のような要素を時系列でsortするにはどうすればいいでしょうか?
<ul>
<li>テキストを時系列で並び替えたい 2011/05/15/19:00</li>
<li>テキストを時系列で並び替えたい 2009/01/15/14:00</li>
<li>テキストを時系列で並び替えたい 2010/05/15/19:00</li>
</ul>
liの中のテキストをArrayオブジェクトに代入して配列にした後
sortでどのような処理をすればいいのでしょうか?
例えば
var myArray = new Array();
でmyArrayと言う配列オブジェクトにliのテキストを代入したときに
myArray.sort(function(a,b) {return a-b;});
とすれば比較要素が単体数字の場合はソートできるのですが
文字と/など複合数字が混在しているとソートできません。
No.4ベストアンサー
- 回答日時:
そもそも、HTML を使っているのに、地の文と日付データをタグで区別できていない時点で致命的です。
HTML を書き換えられるなら、日付データを確実に区別しておくべきです。日付なのですから、Date オブジェクトで比較するのが確実です。<ul>
<li>テキストを時系列で並び替えたい <span class="time">2011/05/15/19:00</span></li>
<li>テキストを時系列で並び替えたい <span class="time">2009/01/15/14:00</span></li>
<li>テキストを時系列で並び替えたい <span class="time">2010/05/15/19:00</span></li>
</ul>
// version(160), ("Selectors-API", "1.0"), ("Core", "3.0")
Array.map (document.querySelectorAll ('ul:first-of-type > li > *.time:first-of-type'), function (time) {
// Date.parse() できる可能性の高い形式なので利用する
return { time: time, container: time.parentNode.parentNode, t: new Date (time.textContent) };
}).sort (function (o1, o2) {
return o1.t - o2.t;
}).forEach (function (o) {
o.C.appendChild (o.time.parentNode);
});
Date オブジェクトを作れる日付文字列は実装依存ですが、心配であれば <span title="2011/05/15 19:00"> のように機械処理可能な文字列を属性値にでも埋め込んでおけば良いでしょう。
どうしても HTML の方を修正できないのなら、日付部分を切り出します。どうせ切り出すのなら、確実に Date を作れるよう日付パラメータを切り出します。
<ul>
<li>テキストを時系列で並び替えたい 2011/05/15/19:00</li>
<li>テキストを時系列で並び替えたい 2009/01/15/14:00</li>
<li>テキストを時系列で並び替えたい 2010/05/15/19:00</li>
</ul>
Array.map (document.querySelectorAll ('ul:nth-of-type(2) > li'), function (li) {
var t = this.exec (li.textContent);
return { e: li, t: t ? new Date (t[1], t[2], t[3], t[4], t[5]) : NaN, L: li.parentNode };
}, /(\d{4})\/(\d{2})\/(\d{2})\/(\d{2}):(\d{2})/).sort (function (o1, o2) {
var t1 = o1.t, t2 = o2.t;
if (isNaN (t1)) return 1;
if (isNaN (t2)) return -1;
return o1.t - o2.t;
}).forEach (function (o) {
o.L.appendChild (o.e);
});
参考URL:http://www.unicode.org/reports/tr10/
No.3
- 回答日時:
日時が24時間法でゼロパディングされているなら、引数なしの Array.prototype.sort() でソートできるはずです。
(例示の配列はこの状態)var myArray = ['テキストを時系列で並び替えたい 2011/05/15/19:00', 'テキストを時系列で並び替えたい 2009/01/15/14:00', 'テキストを時系列で並び替えたい 2010/05/15/19:00'];
myArray.sort();
alert(myArray); // ["テキストを時系列で並び替えたい 2009/01/15/14:00", "テキストを時系列で並び替えたい 2010/05/15/19:00", "テキストを時系列で並び替えたい 2011/05/15/19:00"]
日時がゼロサプレスされていると困った結果になります。
var myArray2 = ['2011/5/15/19:00', '2011/1/15/14:00', '2011/10/15/19:00'];
myArray2.sort();
alert(myArray2); // ["2011/1/15/14:00", "2011/10/15/19:00", "2011/5/15/19:00"]
Array#sort は文字列を先頭から1文字ずつ走査していき、アドレスの小さな順に並び替えます。
"2011/1" と "2011/5" を比較すると前者が小さいので、"2011/10/15/19:00" は "2011/5/15/19:00" より前にソートされてしまいます。
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma26 …
http://es5.github.com/#x15.4.4.11
myArray2 のパターンでソートするには「自然言語アルゴリズム」でソートする必要があります。
https://gist.github.com/660141
No.2
- 回答日時:
> myArray.sort(function(a,b) {return a-b;});
日時部分がうしろから16文字固定ならば、文字列比較でいけるので、
function(a,b) {return a-b;}
を
function(a,b){
return (a.slice(-16) > b.slice(-16)) ? 1 : -1;
}
に替えたらいけないですか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Jquery の slide.toggle で要素...
-
jqueryのsortableで一部ソート...
-
ドロップダウンリストの高さを...
-
jQueryのeqで最後からn番目以降...
-
PukiWikiの左メニューでonMouse...
-
画像転送(ワールド変換行列)...
-
jQueryのアコーディオンメニュ...
-
フッター上部に謎の隙間
-
Javaスクリプトに関して分から...
-
現在のウィンドウのままリンク...
-
ツリー型メニューについて
-
c++std::string型をTCHARに変換...
-
画像をクリックすると音が鳴り...
-
removeEventListenerについて
-
createElementで作成した要素を...
-
1つ1つの画像にイベントを発生...
-
Notice:Undefined index が。
-
CSS <div>の入れ子が反映さ...
-
MAX関数を使ってからLEFT JOIN...
-
画像ランダム表示、しかしダブ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
「jQuery」アコーディオンメニ...
-
jqueryのsortableで一部ソート...
-
jquery ドロップダウンメニュー...
-
JQueryタブのアクティブ アン...
-
ネストされたチェックボックス...
-
jQueryのeqで最後からn番目以降...
-
スムーズスクロールとfleXcroll...
-
大量のチェックボックス状態取...
-
jQueryでネスト構造の<li>がク...
-
スタイルシートでロールオーバ...
-
チェックボックスに入っている...
-
画像のリンクをクリックすると...
-
どの<li><a> が押されたか判別...
-
javascript テキストエリアを1...
-
jquery中のmatch関数が正常に動...
-
jQueryで電卓を作っているのですが
-
javascriptでEnterキーをtabキ...
-
javascriptで教えてください。 ...
-
多階層ドロップダウンのスマホ...
-
タブ切り替えの初期表示について
おすすめ情報