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

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

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

構文

jQueryオブジェクトを要素配列に変換返値:配列
jQo.toArray( )ver1.4〜

機能

toArrayメソッドはjQueryオブジェクトを要素配列に変換します。

解説

jQueryオブジェクトを要素配列に変換する

サンプル(toArray/01.html)を開いてbody内にbutton要素とdiv要素が4つあることを確認して下さい。div要素内にはone,two,three,fourとテキストを設定しています。

<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>

jQueryは以下の様に記述されています。2行目でdiv要素のjQueryオブジェクトをtoArrayメソッドで要素配列に変換し、変数「myArray」に代入しています。3行目ではmyArrayに対しjavaScriptのreverseメソッドで要素配列を逆順にしています(reverseメソッドは配列にしか利用できません)。

そして4行目でmyArrayにjQueryメソッドを利用して要素配列からjQueryオブジェクトに戻して、
appendToメソッドを利用してbody要素内に追加します。

$("button").click(function(){
	var myArray = $("div").toArray();
	myArray.reverse();
	$(myArray).appendTo("body");
});	

結果として、buttonをクリックするとdiv要素の並びが逆順になって表示されます。

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

関連項目

構文は異なりますがjQuery.makeAttayメソッドも同じ機能を持ちます。またgetメソッドで引数を省略した場合は、同じようにjQueryオブジェクトを要素配列に変換できます。