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

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

jQuery.makeArray( )jQueryオブジェクトを要素配列に変換

構文

jQueryオブジェクトを要素配列に変換返値:配列
jQuery.makeArray( object )ver1.2〜

機能

jQuery.makeArrayメソッドは配列に似ているobjectオブジェクト(主にjQueryオブジェクト)を配列に変換します。

jQueryオブジェクトをjQuery.makeArrayメソッドで配列に変換することで、配列にしか利用できないjavaScriptのpopメソッドやreverseメソッドを利用できるようになります。

変換後はjQueryオブジェクトではなくなってしまうので、jQueryオブジェクトとして利用したい場合はjQueryメソッドで配列をjQueryオブジェクトに戻して利用してください。このサイトではjQueryオブジェクトに変換可能な配列を「要素配列」と表記します

解説

jQueryオブジェクトを配列にして処理する

サンプル(makeArray/01.html)を開いてbody内にbutton要素と4つのdiv要素があることを確認して下さい。

<div>First</div>
<div>Second</div>  
<div>Third</div>
<div>Fourth</div>

jQueryでは、まず以下の部分に着目してください。

var elems = $("div")
var myArray = jQuery.makeArray(elems);
myArray.reverse();
$(myArray).appendTo("body");

まず1行目でjQueryメソッドを利用してdiv要素にマッチしたjQueryオブジェクトを作成し変数elemsに代入します。それを2行目でjQuery.makeArrayメソッドを利用して配列に変換します。そして3行目でjavaScriptのreverseメソッドを利用して配列の要素を逆順にします。

最後に4行目で逆順にした配列「myArray」をjQueryメソッドを利用して再びjQueryオブジェクトに戻してから、appendToメソッドを利用してbody要素内に追加します。結果として、buttonをクリックするとdiv要素の並びが逆順になって表示されます。

appendToメソッドは要素を「追加」するメソッドですが、このサンプルでは元からあるdiv要素に上書きされて追加されません。これはjQueryオブジェクトは同じ要素が重複しないように制御されているためです(たぶん)。
→参考:uniqueメソッドのメモ「jQueryオブジェクトは重複を気にしなくてOK」を参照

ちなみにjQueryオブジェクトにはreverseメソッドは利用できません。サンプル(makeArray/01b.html)を確認してbuttonをクリックしても何も変化しないことを確認してください。

$("button").click(function(){
	$("div").reverse().appendTo("body");;
});

関連項目

toArrayメソッドgetメソッドも同じようにjQueryオブジェクトを配列に変換しますが、構文が異なり引数にjQueryオブジェクトを設定するのではなくオブジェクト(主語)として設定します。
個人的にはtoArrayの構文の方が好きです、新しいですし(toArrayはv1.4で追加)。

メモ

要素配列の検証

要素配列はDOM要素を配列に入れた構造をしているようです。サンプル(makeArray/test01.html)で以下の様に要素配列「myArray」の最初の1つを取り出してjavaScriptのinnerTextプロパティを利用してテキストを変更しています。buttonをクリックすると、きちんと機能して最初のdiv要素のテキストが「aaa」に変更されます。

$("button").click(function(){
	var elems = $("div")
	var myArray = jQuery.makeArray(elems);
	myArray[0].innerText = "aaa";
});

DOM要素なのでjQueryメソッドで個別にjQueryオブジェクトに戻すこともできます。
サンプル(makeArray/test01b.html)では要素配列「myArray」の最初の1つにjQueryメソッドを利用してjQueryオブジェクトに戻しています。なのでcssメソッドで背景色を変更することが可能になり、buttonをクリックすると最初のdiv要素の背景色がピンクになります。

$("button").click(function(){
	var elems = $("div")
	var myArray = jQuery.makeArray(elems);
	$(myArray[0]).css("background-color", "#f9f");
});