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

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

.index( )要素のインデックス番号を取得

構文

要素のインデックス番号を取得返値:数値
jQo.index( DOM/jQo )ver1.0〜
jQo.index( セレクタ )ver1.4〜
jQo.index( )ver1.4〜

機能

jQueryオブジェクトで指定した要素のうち引数に設定した要素とマッチした要素のインデックス番号を取得します。引数にはDOM要素とjQueryオブジェクトを設定できますが複数の要素がマッチした場合は、最初にマッチした要素のインデックス番号だけを返します。対象の要素が見つからない場合は-1を返します。

v1.4から引数にセレクタを設定して、jQueryオブジェクトに指定した要素が引数のセレクタのうち何番目の要素になるかを返すことができるようになりました(前述と同じ機能の別構文です)。

また、引数に何も設定しない場合はオブジェクトで指定した要素が「兄弟要素の中で」何番目の要素になるかを返します(たぶん、この用法が一番利用されるのではないでしょうか?)。

解説

引数にjQueryオブジェクトを利用する

サンプル(index/01.html)を開いてbody内にul要素内にli要素が5つあることを確認して下さい。li要素では上から3番目と5番目にclass属性でtestと設定しています。またインデックス番号をli要素のテキストの最後の()内に記述しています。

<ul>
	<li>普通のli要素(0)</li>
	<li>普通のli要素(1)</li>
	<li class="test">testのclass属性付きli要素(2)</li>
	<li>普通のli要素(3)</li>
	<li class="test">testのclass属性付きli要素(4)</li>
</ul>

jQueryは以下の様に記述されています。2行目でtestのクラス属性を持った要素のjQueryオブジェクトを作成し、3行目でindexメソッドの引数として利用しています。取得した結果は4行目でアラートで表示するようにしました。

$("button").click(function(){
	var myTarget = $(".test");
	var myIndex = $("li").index(myTarget);
	alert(myIndex)
});	

buttonをクリックするとアラートで「2」が表示されます。これはindexメソッドの引数に設定した「testのクラス属性を持った要素」が、オブジェクトに指定した「li要素」のうちの2番目になるからです。

testのクラス属性を持つ要素はもう1つありますが、最初にマッチした要素のインデックス番号しか返さないことに注意してください。

引数にセレクタを利用する

前項で説明したindexメソッドの構文はv1.0からある古い構文で、引数にjQueryオブジェクトやDOM要素を設定しなければなりません。しかしv1.4からはセレクタを設定でき、よりシンプルに記述できるようになりました。混乱しないように、これから説明する新しい構文だけを覚えた方が良いと思います。

サンプル(index/02.html)を開いてbody内の構成はindex/01.htmlと同じ事を確認してください。jQueryは以下の様に記述され、インデックス番号を調べたいtestのクラス属性をオブジェクト(jQo)として設定し、引数に対象にするli要素を設定しています。前述の構文とは主語述語が入れ替わった構文になっています

$("button").click(function(){
	var myIndex = $(".test").index("li");
	alert(myIndex)
});

jQueryオブジェクトを作成する必要がないのでindex/01.htmlよりもシンプルに記述できます。機能的には同じなので、buttonをクリックするとアラートで「2」と表示されます。こちらの構文だけを覚えた方が混乱しないと思います。

あと該当する要素がない場合のサンプルも作成しました。サンプル(index/02b.html)を開いてbody内の構成はindex/02.htmlと同じ事を確認してください。異なるのは以下の様に、jQueryのセレクタに「.sample」と存在しない要素を指定している点だけです。

$("button").click(function(){
	var myIndex = $(".sample").index("li");
	alert(myIndex)
});

sampleクラスを持つ要素がないため、buttonをクリックするとアラートで「-1」と表示されます。

ページを通してのインデックス番号です

indexメソッドはページ通したインデックス番号を取得します。サンプル(index/03.html)を開いてol要素が追加されているのを確認して下さい。li要素は5つありますが、クラスは1つも設定されていません。

これまでと同じようにli要素内のテキストの最後にインデックス番号を表記していますがol要素とul要素で通し番号になっていることを確認して下さい(以下表の赤字部分)。

<ol>
	<li>普通のli要素(0)</li>
	<li>普通のli要素(1)</li>
	<li>普通のli要素(2)</li>
	<li>普通のli要素(3)</li>
	<li>普通のli要素(4)</li>
</ol>
<ul>
	<li>普通のli要素(5)</li>
	<li>普通のli要素(6)</li>
	<li class="test">testのclass属性付きli要素(7)</li>
	<li>普通のli要素(8)</li>
	<li class="test">testのclass属性付きli要素(9)</li>
</ul>

jQueryは以下の様にindex/02.htmlから変更ありません。testのクラス属性を持つ要素がli要素の何番目かをアラートで表示します。

$("button").click(function(){
	var myIndex = $(".test").index("li");
	alert(myIndex)
});

indexメソッドはページを通してのインデックス番号を取得するため、buttonをクリックするとアラートで「7」が表示されます。「この構文」で取得できるインデックス番号はページ内を通してであることを覚えておいて下さい

引数に何も設定しない場合は兄弟要素でのインデックス番号を取得します

前項で「ページ内を通してのインデックス番号」を取得することを確認しましたが、兄弟要素内のでのインデックス番号を取得する構文もあります。サンプル(index/04.html)を開いてbody内の構成は、ほとんどindex/03.htmlと同じですが、以下の様にul要素内だけでのインデックス番号も表記するようにしました。

<ul>
	<li>普通のli要素(5)(0)</li>
	<li>普通のli要素(6)(1)</li>
	<li class="test">testのclass属性付きli要素(7)(2)</li>
	<li>普通のli要素(8)(3)</li>
	<li class="test">testのclass属性付きli要素(9)(4)</li>
</ul>

jQueryは少しだけ変更されており、以下の様に引数に何も設定されていません。この構文を利用するとtestのクラス属性を持つ要素が、兄弟要素の内の何番目かを取得できるのですこの構文が一番使い勝手が良さそうです。

$("button").click(function(){
	var myIndex = $(".test").index();
	alert(myIndex)
});

結果として、buttonをクリックするとアラートで「2」が表示されます。この結果から、引数を省略すると兄弟要素(つまりul要素)内でのインデックス番号を取得することが確認できます。

関連項目

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