JavaScript、jQuery、両者を使って要素を並べ替える

プログラミング

"Yahoo!知恵袋"で下記のような質問に出会ったので、実際に作ってみました。

ソース(抜粋)
※ 全文は、実験ページのソースをご覧下さい。

並べ替えるリスト
id名の数値の順番に並べ替えます。

<ol id="test1">
	<li id="3">id:3 cccccc</li>
	<li id="4">id:4 dddddd</li>
	<li id="1">id:1 aaaaaa</li>
	<li id="2">id:2 bbbbbb</li>
</ol>

JavaScript

var ol = document.getElementById('test1');
var li = ol.getElementsByTagName('li');
//直接 childs.sort() と記述することはできない。
//よって、比較用にオブジェクト配列を作成する。
var arr = [];
for (i = 0; i < li.length; i++) {
	arr[i] = {
		idx : i,
		id : parseInt(li[i].getAttribute('id'), 10)
	};
}
//JavaScriptには"insertAfter"が存在しないため、大きい順に並べ替える。
arr.sort(function(a, b) { return b.id - a.id });
//実際に要素を並べ替える。
for (i = 0; i < arr.length; i++) {
	ol.insertBefore(childs[arr[i].index]);
}

jQuery

$('#test2').html(
	$('#test2 > li').sort(function(a, b) {
		return parseInt($(a).attr('id'), 10) - parseInt($(b).attr('id'), 10);
	})
);

………………。
普段、自分がどれほどjQueryの恩恵を受けているか、改めて実感させられました (^ ^;)
素のJSの方ではコメントをしつこく書いているとはいえ、コード量と簡潔さは一目瞭然です。
jQueryを知らないままprototype.jsを使い続けていたかもしれませんし、
あの時教えていただいた id:duck75 さんには本当に感謝ですね (-人-)