【jQuery】オブジェクトからDOM要素を取得するメソッド(get、toArray等)の使い方

こちらではjQueryのメソッドのうち、オブジェクトからDOM要素を取得するメソッドについて解説しています。

jQueryのオブジェクトからDOM要素を取得するメソッド一覧

.length

選択しているjQueryオブジェクトの数を返すメソッドです。

.lengthプロパティです。.size()と同じ値を返します。

.size()は関数呼び出しのオーバヘッドがあるので、.lengthの使用が推奨されます。

jQuery3.0で.size()は廃止されました。

.lengthの使い方

<ul>
	<li class="red">りんご</li>
	<li class="orange">みかん</li>
	<li class="green">メロン</li>
</ul>

上記のHTMLにおいて

var a = $('li').size();
console.log(a);

とすると、コンソールに「3」と表示されます。

get(index)

jQueryオブジェクトからindexで指定した要素(DOM要素)を取得します。

取得されるのはDOM要素なので、その要素自体はjQueryメソッドを使用することはできません。

get(index)の使い方

<ul>
	<li class="red">りんご</li>
	<li class="orange">みかん</li>
	<li class="green">メロン</li>
</ul>

上記のHTMLにおいて

var a = $('li').get(0);
console.log(a);
console.log(a.className);
console.log(a.textContent);

とするとコンソールに

<li class="red">
red
りんご

と表示されます。

また、$('li').get(0)と$('li')[0]は同じ値となります。

.get()

jQueryオブジェクトから全ての要素(DOM要素)を取得します。

返り値は配列となります。

.get()の使い方

<ul>
	<li class="red">りんご</li>
	<li class="orange">みかん</li>
	<li class="green">メロン</li>
</ul>

上記のHTMLにおいて

var a = $('li').get();
console.log(a);

とするとコンソールに

[ li.red, li.orange, li.green ]

と表示されます。

.toArray()

jQueryオブジェクトから全ての要素(DOM要素)を配列形式で取得します。

.toArray()の使い方

<ul>
	<li class="red">りんご</li>
	<li class="orange">みかん</li>
	<li class="green">メロン</li>
</ul>

上記のHTMLにおいて

var a = $('li').toArray();
console.log(a);

とするとコンソールに

[ li.red, li.orange, li.green ]

と表示されます。

.each(function)

マッチしたjQueryオブジェクトの各要素に対して関数を実行します。

引数となる関数の型は、function(index, element)となっています。

.each(function)の使い方

<ul>
	<li class="red">りんご</li>
	<li class="orange">みかん</li>
	<li class="green">メロン</li>
</ul>

上記のHTMLにおいて

$('li').each(function(index){
	var a = index + ': ' + $(this).text();
	console.log(a);
});

を実行すると、コンソールに

0: りんご
1: みかん
2: メロン

と表示されます。

.map(callback)

マッチした各要素に対してコールバック関数を実行し、返り値を含む新しいjQueryオブジェクトを生成します。

コールバック関数の型は、function(index, element)となっています。

.map(callback)の使い方

<ul>
	<li class="red">りんご</li>
	<li class="orange">みかん</li>
	<li class="green">メロン</li>
</ul>

上記のHTMLにおいて

var a = $('li').map(function(){
	return this.className;
}).get().join(',');
console.log(a);

とするとコンソールに

red,orange,green

と表示されます。

.index()

マッチした要素の中から、特定の要素を検索します。

引数のタイプにより.index()、.index(selector)、.index(element)の3種類あります。

.index()の使い方

選択したjQueryオブジェクトが、兄弟要素の中で何番目にあるのかを返します。

複数マッチする場合は、最初の要素が対象となります。

<ul>
	<li id="apple">りんご</li>
	<li id="orange">みかん</li>
	<li id="melon">メロン</li>
</ul>

上記のHTMLにおいて

var index = $('#orange').index();
console.log(index);

とするとコンソールに

1

と表示されます。

.index(element)の使い方

引数にDOM要素を渡して要素を検索します。

<ul>
	<li id="apple">りんご</li>
	<li id="orange">みかん</li>
	<li id="melon">メロン</li>
</ul>

上記のHTMLにおいて

var item = document.getElementById('orange');
var index = $('li').index(item);
console.log(index);

とするとコンソールに

1

と表示されます。

.index(selector)の使い方

引数にjQueryオブジェクトを渡して要素を検索します。

<ul>
	<li id="apple">りんご</li>
	<li id="orange">みかん</li>
	<li id="melon">メロン</li>
</ul>

上記のHTMLにおいて

var item = $('#orange');
var index = $('li').index(item);
console.log(index);

とするとコンソールに

1

と表示されます。