Home > 技術 > jQuery.uniqueのsortOrder関数がかっこいい！！

jQuery.uniqueのsortOrder関数がかっこいい！！

2010-03-18 (木)
技術

配列の中から重複した要素を除去するjQuery.uniqueがかっこいいです。
実際には、

document.documentElement.compareDocumentPosition

"sourceIndex" in document.documentElement

document.createRange

のいずれかを持つブラウザを対象としているようです。

ざっくり抜き出してみたのが以下のコード。

サンプルコード

div1とdiv2がいる前提でコードを書いてます。

(function() {
	// jQuery.unique
	var hasDuplicate = false,
		baseHasDuplicate = true;

window.UniqueSort = function(results){
		hasDuplicate = baseHasDuplicate;
		results.sort(sortOrder);

// 重複があった場合
		if ( hasDuplicate ) {
			for ( var i = 1; i < results.length; i++ ) {
				// 隣接する重複要素を除去
				if ( results[i] === results[i-1] ) {
					results.splice(i--, 1);
				}
			}
		}

return results;
	};

function sortOrder( a, b ) {
		if ( !a.ownerDocument || !b.ownerDocument ) {
			if ( a == b ) {
				hasDuplicate = true;
			}
			return a.ownerDocument ? -1 : 1;
		}

var aRange = a.ownerDocument.createRange(), bRange = b.ownerDocument.createRange();
		aRange.setStart(a, 0);
		aRange.setEnd(a, 0);
		bRange.setStart(b, 0);
		bRange.setEnd(b, 0);
		// 2つの range の端点の位置を比較します
		var ret = aRange.compareBoundaryPoints(Range.START_TO_END, bRange);

// 重複があった！
		if ( ret === 0 ) {
			hasDuplicate = true;
		}
		return ret;
	};
})();

// DCL
$(function() {
	var div1 = $("#div1").get(),
		div2 = $("#div2").get(),
		divs = [];
	divs = divs.concat(div1);
	divs = divs.concat(div2);
	// 重複させる
	divs = divs.concat($("div").get());

// 重複した配列
	console.log(divs);
	//　重複を除去した配列
	console.log(UniqueSort(divs));
});

sortOrder関数にはdocument.createRangeバージョンを設定しています。

解説

まず

[div#div1, div#div2, div#div1, div#div2]

という配列をUniqueSort関数に渡して、sortメソッドを呼びます。

すると

[div#div1, div#div1, div#div2, div#div2]

というふうに重複要素が隣接されます。

あとは配列の前後を比較して等値だったら、sliceで取り除いている感じです。

最終的には

[div#div1, div#div2]

と重複要素がなくなっている！！

2つの要素のownerDocument.createRange()で要素の場所を特定して、compareBoundaryPointsメソッドで比較しているようなんですが、
compareBoundaryPointsメソッドってoffsetTop、offsetLeftをもとに比較しているのかな？

以下を見てもよくわからなかった。。。
range - MDC

Rangeオブジェクトを使って並び替えるのはなんか斬新で面白かったです。