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

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

.eq( )指定したインデックス番号の要素を選択

構文

指定したインデックス番号の要素を選択返値:jQueryオブジェクト
jQo.eq( インデックス番号 )ver1.1.2〜
jQo.eq( 負のインデックス番号 )ver1.4〜

機能

jQueryオブジェクトで指定した要素のうち引数のインデックス番号で指定された要素を選択します。インデックス番号は0から始まることに注意してください。

ver1.4からは負のインデックス番号を指定することで最後の要素から数えた要素を選択できるようになりました。この場合インデックス番号は-1から始まります

解説

引数に正のインデックス番号を設定

サンプル(eq/01.html)を開いてul要素が2つあり、それぞれli要素を5つ持っていることを確認して下さい。インデックス番号が確認しやすいように()内にインデックス番号を書いています。

jQueryは以下の様に記述され、buttonをクリックするとli要素のうち8番目の要素を選択します。選択した要素はcssメソッドを利用して背景を赤くしています。

$("button").click(function(){
	$("li").eq(8).css("background-color","#f99");
})

結果として、buttonをクリックすると8番目のli要素が選択され背景色が赤くなります。インデックス番号は0から始まるので実質9番目のli要素が選択されることに注意してください。

負のインデックス番号を設定

ver1.4からは引数に負の値を設定できるようになりました。負の値を設定すると最後から逆に辿った要素を指定できます。サンプル(eq/02.html)を開いてhtmlの構成がサンプルeq/01.htmlとほとんど同じ事を確認してください。異なっているのはli要素の内容に()で負のインデックス番号を書いた点のみです。jQueryは以下の様に記述され、eqメソッドの引数に-3が設定されています。

$("button").click(function(){
	$("li").eq(-3).css("background-color","#f99");
})

結果として、buttonをクリックすると最後から数えて3番目のli要素が選択され背景が赤くなります。引数に負の値を利用する場合はインデックス番号は-1から始まる点に注意してください。

関連項目

特定の範囲のインデックス番号を持つ要素を選択したい場合はsliceメソッドを利用します。
最初の要素を選択したい場合はfirstメソッドを利用します。
最後の要素を選択したい場合はlastメソッドを利用します。

メモ

Traversingのメリット

セレクタの:eq()を利用すればeqメソッドと同じようなことが可能です。サンプル(eq/test01.html)を開いてhtmlの構成がサンプルeq/01.htmlと同じ事を確認してください。

jQueryはセレクタの部分をセレクタの:eq()を利用したものに置き換えただけです。buttonをクリックするとサンプルeq/01.htmlと同じ結果になることを確認して下さい。

$("button").click(function(){
	$("li:eq(8)").css("background-color","#f99");
})

すでに要素が選択されている(jQueryオブジェクトがある)場合やthis(参考:使い方「thisから辿る」)と合わせて利用する時はTraversingを利用すればよいと思います。