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

.get( )jQueryオブジェクトからDOM要素を取得

構文

jQueryオブジェクトからDOM要素を取得返値：DOM要素/配列
jQo.get( インデックス番号 )ver1.0〜
jQo.get( )ver1.0〜

機能

getメソッドはjQueryオブジェクトで指定した要素のうち、引数に指定されたインデックス番号の要素（DOM要素）を取得します。引数を省略した場合は、すべてのDOM要素を配列に入れて返します。この場合toArrayメソッドと同じ機能になります。

解説

jQueryオブジェクトからDOM要素を取得する

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

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

jQueryは以下の様に記述され、buttonをクリックするとdiv要素にマッチしたjQueryオブジェクトから、getメソッドで1番目のDOM要素を取得します。取得したDOM要素は変数myObjに代入され、3行目でjavaScriptのinnerTextプロパティを「AAAAA」に設定しています。 

$("button").click(function(){
	var myObj = $("div").get(1);
	myObj.innerText = "AAAAA";
});

結果として、buttonをクリックすると上から2番目のdiv要素のテキストが「AAAAA」となります。インデックス番号は0から始まるためgetメソッドの引数で1を指定することは、実質2番目のdiv要素を指します。

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

getメソッドで引数を省略すると、jQueryオブジェクト内のDOM要素をすべて配列に入れて返します。つまりjQueryオブジェクトを要素配列に変換します。サンプル（get/02.html）を開いてbody内の構成がget/01.htmlと同じ事を確認してください。

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

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

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

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

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

関連項目

getメソッドとは逆に指定した要素のインデックス番号を取得したい場合はindexメソッドを利用して下さい。

jQueryオブジェクトを要素配列に変換するには、他にtoArrayメソッドやjQuery.makeAttayメソッドがあります。

メモ

ブラケットアクセスで同じ事ができます

jQueryオブジェクトはブラケットアクセス（[ ]を利用した構文）が使えるのでgetメソッドの代わりになります。
個人的には短く記述できるブラケットアクセスの方をよく利用しています。

サンプル（get/test01.html）を開いてbody内の構成がget/01.htmlと同じ事を確認してください。jQueryは以下の様に変更され、getメソッドの代わりにブラケットアクセスで1番目の要素を取得するようにしています。ブラケット（[ ]）の前にはドットが必要ないことに注意して下さい。 

$("button").click(function(){
	var myObj = $("div")[1];
	myObj.innerText = "AAAAA";
});

結果はget/01.htmlとまったく同じになります。

しかしgetメソッドはマイナスの数値が利用できます

前項で説明したようにブラケットアクセスの方が簡単ですが、getメソッドは負のインデックス番号を利用できるというメリットがあります。負のインデックス番号を利用すると後から数えた番目の要素を取得できます（-1が最後の要素となります）。

サンプル（get/test02.html）を開いてbody内の構成がget/01.htmlと同じ事を確認してください。jQueryは以下の様に変更され、getメソッドの引数が-1が設定されています。 

$("button").click(function(){
	var myObj = $("div").get(-1);
	myObj.innerText = "AAAAA";
});

buttonをクリックすると最後の要素のテキストが変更され、マイナスのインデックス番号に対応しているのが確認できます。

念のためブラケットアクセスではマイナスのインデックス番号が利用できないのを確認します。サンプル（get/test02b.html）を開いて、ほとんどget/test01.htmlと同じ事を確認してください。異なるのは以下の様にブラケット内の数字を-1に変更している点だけです。 

$("button").click(function(){
	var myObj = $("div")[-1];
	myObj.innerText = "AAAAA";
});

buttonをクリックしても何も変わらないことから、ブラケットアクセスはマイナスのインデックス番号には対応していないことが確認できます。

jQueryオブジェクトが欲しいのであればeq()

getメソッドで取得できるのはDOM要素のため、あまり利用の機会はないと思います。指定したインデックス番号の要素（jQueryオブジェクト）が欲しい場合はセレクタの:eq()を利用して下さい。

サンプル（get/test03.html）ではget/01.htmlと同じ処理を:eq()とtextメソッドを利用して実現しています。以下の様によりシンプルに記述できていることを確認して下さい。 

$("button").click(function(){
	var myObj = $("div:eq(1)").text("AAAAA");
});

buttonをクリックするとget/01.htmlと同じようにインデックス番号1番のdiv要素のテキスト内容を「AAAAA」に変更します。

:eq()は負のインデックス番号にも対応しています。サンプル（get/test03b.html）を開いて、以下の様に引数が-1に変更されているのを確認してください。 

$("button").click(function(){
	var myObj = $("div:eq(-1)").text("AAAAA");
});

buttonをクリックすると最後の要素のテキストが変更され、マイナスのインデックス番号に対応しているのが確認できます。