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

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

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

構文

指定したインデックス番号の要素を選択
$(":eq(インデックス番号)")ver1.0〜
$(":eq(負のインデックス番号)")ver1.8〜
※:(コロン)を忘れないように注意しましょう
※インデックス番号は0から始まることに注意。

機能

:(コロン)に続けてeqを設定し、引数としてインデックス番号を指定すると指定したインデックス番号の要素を選択します。このときインデックス番号は0から始まることに注意してください。

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

解説

指定したインデックス番号の要素を選択します

サンプル(eq/01.html)を開いてbody内にdiv要素が6つあることを確認してください。

<div>0番目</div>
<div>1番目</div>
<div>2番目</div>
<div>3番目</div>
<div>4番目</div>
<div>5番目</div>

jQueryには以下の様に記述され、複数のセレクタ(and)を利用してdiv要素と組みあわせました。そのためbuttonをクリックするとdiv要素のうち0番目の要素を選択します。選択した要素はcssメソッドを利用して背景色を緑にします。

$("button").click(function(){
	$("div:eq(0)").css("background-color","#9f9");
});

結果として、buttonをクリックすると一番上のdiv要素の背景色が緑になります。

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

インデックス番号はページを通して連番になっていることの注意してください。サンプル(eq/02.html)を開いてbody内にol要素とul要素の2つのリストがあることを確認して下さい。各リストにはli要素が5つづつあります。

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

$("button").click(function(){
	$("li:eq(8)").css("border","3px solid red");
});

ul要素とol要素は異なるリスト要素ですが、li要素は共通のためul要素/ol要素を通して連続したインデックス番号が設定されます。その結果、buttonをクリックするとul要素の下から2番目のli要素が選択されます。

他のセレクタと組みあわせる

もしul要素やol要素ごとにli要素を選択したい場合は>(子要素)を利用します。サンプル(eq/03.html)を開いてbody内の構成がeq/02.htmlと同じことを確認してください。jQueryは以下の様に記述され、セレクタに >(子要素)が追加されてul要素内の1番目のliを選択するようにしました。

$("button").click(function(){
	$("ul>li:eq(1)").css("background-color","#FCC");
});

その結果、buttonをクリックするとul要素内で1番目のli要素が選択されます。

サンプルeq/03.htmlではul要素内にli要素しかないので、li要素の記述は省略しても同じです。サンプル(eq/03b.html)を開いてjQueryが以下の様に変更されていることを確認して下さい。しかし選択される要素はサンプルeq/03.htmlと同じになります。

$("button").click(function(){
	$("ul>:eq(1)").css("background-color","#FCC");
});

負のインデックス番号も利用できます

Traversingのeq()では以前から負のインデックス番号を利用できていたのですが、セレクタのeq()もv1.8から負のインデックス番号が利用できるようになりました。

サンプル(eq/04.html)を開いてbody内の構成がeq/01.htmlと同じ事を確認してください。jQueryは以下の様にセレクタeqの引数に-1が設定されています。結果としてbuttonをクリックすると最後から1番目のdiv要素が選択されます。

$("button").click(function(){
	$("div:eq(-1)").css("background-color","#9f9");
});

最後から2番目を選択したい場合はサンプル(eq/04b.html)のように引数に-2を設定します。

$("button").click(function(){
	$("div:eq(-2)").css("background-color","#9f9");
});

関連項目

指定した番号より大きなインデックス番号の要素を選択する場合は:gt( )を利用します。
指定した番号より小さなインデックス番号の要素を選択する場合は:lt( )を利用します。

メモ

eq()を利用する対象が、すでにjQueryオブジェクトになっている場合はTraversingのeq()を利用しても良いでしょう。