デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.unique( )要素配列の重複を解消

構文

要素配列の重複を解消返値:配列
jQuery.unique( 配列 )ver1.1.3〜

機能

jQueryオブジェクトにgetメソッドなどを利用して得られた要素配列に対し、jQuery.uniqueメソッドを利用すると要素のソートをして複数ある要素は削除し重複を解消します。

jQuery.uniqueメソッドは「要素配列」にしか利用できません。数値や文字列が設定された通常の配列では機能しないことに注意してください。
また、jQueryオブジェクトの場合は重複を気にする必要はありません。→ページ最下部の「メモ」参照。

解説

まずは重複した要素配列を確認します

まずはjQuery.uniqueメソッドを利用していないサンプルから確認します。
サンプル(unique/01.html)を開いてbody内にbutton要素と5つのdiv要素があることを確認してください。div要素には「test」か「sample」のクラス属性が付けられていますが、1つだけtestとsampleの両方のクラスを持っている要素があります。

<div class="sample">sample</div>
<div class="test">test</div>
<div class="sample test">test sample</div>
<div class="test">test</div>
<div class="sample">sample</div>

続いて以下のjQueryを確認してください。getメソッドを利用してsampleのクラス属性を持った要素を配列に変換し変数arr_1に代入しています。同様にtestのクラス属性を持つ要素を配列に変換し変数arr_2に代入しています。そして3行目でjavaScriptのcontactメソッドを利用して、2つの配列を連結して新しい配列「myArray」を得ました。

var arr_1 = $(".sample").get();
var arr_2 = $(".test").get();
var myArray = arr_1.concat(arr_2);

buttonをクリックすると以下の処理が実行され、配列に含まれている要素の数をアラートで表示します。

$("button").click(function(){
	alert(myArray.length);
});

結果として「6」が表示されますが、これはsampleとtestの両方のクラス属性を持つ要素があるため、その要素が重複してカウントされたためです。同じ要素が重複していると操作する際に余分に負荷が掛かるため良くありません。そこでjQuery.uniqueメソッドを利用します。

要素配列の重複を解消する

サンプル(unique/02.html)を開いて、ほとんどunique/01.htmlと同じ事を確認してください。異なるのはbuttonをクリックした時の処理が、以下の様に1行追加されている点だけです。

$("button").click(function(){
	var uniqueArray = $.unique(myArray);
	alert(uniqueArray.length);
});

jQuery.uniqueメソッドによって、testのクラス属性とsampleのクラス属性の2つ分カウントされていた要素が「重複分を削除」されます。結果としてbuttonをクリックするとアラートで「5」と表示されます。

要素配列にしか利用できないというけれど...

本家サイトの解説には「This function only works on plain JavaScript arrays of DOM elements」とあるのですが、要素配列(DOM要素の配列)ではない通常の配列の重複も解消しました...。

サンプル(unique/03.html)を開いてjQueryが以下の様に記述されていることを確認して下さい。ポイントは1行目で作成した配列で、重複した要素がある点です。

myArray = [0,1,1,2,2,2];
$("button").click(function(){
	var uniqueArray = $.unique(myArray);
	alert(uniqueArray);
});

buttonをクリックするとjQuery.uniqueメソッドで重複を解消してアラートで表示するようにしています。実際にbuttonをクリックすると重複した要素が解消された結果が表示されます。これは結構便利だと思うのですが、本家サイトの記述と異なることから何か問題でもあるのでしょうか?

関連項目

jQueryオブジェクトにgetメソッドを利用すると、jQueryオブジェクト内の要素を配列に入れ換えてくれます。つまりjQueryオブジェクトを配列に変換します。

メモ

要素配列のメリット

jQueryオブジェクトを要素配列に変換するメリットとして、配列に利用するreverseメソッドやsortメソッドが利用できることがあります。これらのサンプルはjQuery.makeArrayメソッドの「メモ」にあるので確認してください。jQuery.makeArrayメソッドもjQueryオブジェクトから配列を作成する事ができます。

配列要素はjQueryオブジェクトに戻せます

jQueryメソッドを利用すると、要素配列をjQueryオブジェクトに戻すことができます。
サンプル(unique/test01.html)を開いてほとんどunique/02.htmlと同じ事を確認してください。異なるのはアラートの代わりにjQueryメソッドを利用してuniqueArrayをjQueryに戻し、cssメソッドで背景色をピンクに変更している点だけです。

$("button").click(function(){
	var uniqueArray = $.unique(myArray);
	$(uniqueArray).css("background-color","#fcf");
});

uniqueArrayはjQueryオブジェクトに戻ったので、jQueryのメソッドで処理できるのです。結果としてbuttonをクリックするとdiv要素の背景色がピンクに変わります。

逆に要素配列のままだと、jQueryのメソッドでは処理できません。サンプル(unique/test01b.html)は以下の様にjQueryメソッドを利用せず、配列要素のままcssメソッドを利用しています。

$("button").click(function(){
	var uniqueArray = $.unique(myArray);
	uniqueArray.css("background-color","#fcf");
});

結果として、buttonをクリックしても何も変わりません。

jQueryオブジェクトは重複を気にしなくてOK

jQueryオブジェクトでは要素の重複は発生しません。サンプル(unique/test02.html)を開いてbody内の構成はunique/test01.htmlと同じ事を確認してください。

jQueryは大幅に変更されており、まず以下の様にjQueryを配列に変換してから連結するのではなく、Traversingのaddメソッドを利用してsampleのクラス属性をもつ要素にtestのクラス属性をもつ要素を追加しています。addメソッドによって連結されたjQueryオブジェクトは変数「myObj」に代入しました。

var myObj = $(".sample").add(".test");

buttonをクリックすると、以下の様にjavaScriptのlengthプロパティを利用してjQueryオブジェクト「myObj」内の要素数をアラートで表示します。

$("button").click(function(){
	alert(myObj.length);
});

結果として、buttonをクリックするとアラートで5が表示されます。jQuery.uniqueメソッドを利用しなくてもjQueryオブジェクトは要素が重複しないようになっているのです。