jquery：get()

このメソッドの説明

get() はjQueryメソッドです。

jQueryオブジェクトを配列に変換します。

 

---

メソッド

jQueryオブジェクト.get()

 

---

パラメータ

ありません。

---

戻り値

配列を返します。

 

---

解説

このメソッドを理解する為には、jQueryオブジェクトとは何かを理解する必要があります。

[サンプルHTML]

<div class='test'>項目1</div>
<div class='test'>項目2</div> 
<div class='test'>項目3</div>

上記のHTMLから1番目の「項目１」を抽出する方法をステップ毎に処理していきます。

普通の方法は 下に記載した事例 を見て下さい。

$(function(){
	var get_object = $('.test');  // testクラスの物を集めてjQueryオブジェクトにします。
	   console.log(get_object);   
	var get_text = get_object.text();// jQueryオブジェクトからテキストデータだけを取得
	   console.log(get_text);
	var get_array = get_object.get();// jQueryオブジェクトをget()メソッドで配列に変換します
	   console.log(get_array);
	var get_html = get_array[0];// 配列の1番目をHTMLで取得
	   console.log(get_html);
	var get_data = get_html.textContent;// HTMLからテキストデータを取得
	   console.log(get_data);
});

■3行目：jQueryオブジェクトの作成と表示

下記がコンソールに表示されます。

▶S.fn.init(3)

※上記の中には選択された要素情報やjQueryメソッド等が登録されています。
詳細は自分のプログラムでフルダウンして見て下さい。

■5行目：jQueryオブジェクトからテキストデータの取得と表示。

下記がコンソールに表示されます。しかしこれでは「項目1」が取得できません。

項目1項目2項目3

■7行目：そこで、今度はjQueryオブジェクトを.get()で配列に変換したものを表示します。

下記がコンソールに表示されます。

▶(3) [div.test, div.test, div.test]

※上記の中は配列になりました。

詳細は自分のプログラムでフルダウンして見て下さい。。

■9行目：配列になったので、配列の1番目を取り出します。

下記がコンソールに表示されます。

<div class="test">項目1</div>

※1行目のHTML情報が表示されます。

■11行目：上記のHTMLからテキストデータを取り出します。

項目1

※ターゲットのデータが取り出されました。

 

---

事例

①jQueryオブジェクトからテキストデータを取り出す。

解説の所で長いjQuery文を書きましたが、実際は map(func) で取り出させます。

$(function(){
		var text_object = $('.test').map(function() { // testクラスのtextデータを取得してjQueryオブジェクトに入れる。
		return ($(this).text());
	});
	var text_array = text_object.get();// 配列に変換
	console.log(text_array[0]);
	});

■2～3行目

map(func)で、テキスト値をjQueryオブジェクトとして取り出します。

■5行目

jQueryオブジェクトを get()で配列に変換します。

■6行目

配列の一番目を出力すると下記が表示されます。

項目1

 

---

関連情報

このメソッドは map(func) でよく使われます。参照してください。