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

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

:gt( )指定した番号より大きいインデックス番号の要素を選択

構文

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

機能

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

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

解説

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

サンプル(gt/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をクリックするとインデックス番号が0より大きいdiv要素を選択します(引数で指定した0番目の要素は含みません)。選択した要素はcssメソッドを利用して背景色を緑にします。

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

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

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

jQueryは以下の様に記述され、buttonをクリックするとインデックス番号が2より大きいli要素を選択します。選択した要素はcssメソッドを利用して背景色をピンクに変更します。

$("button").click(function(){
	$("li:gt(2)").css("background-color","#FCC");
});

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

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

もし個別にli要素を選択したい場合は>(子要素)を利用します。サンプル(gt/03.html)を開いてbody内の構成がeq/02.htmlと同じ事を確認してください。jQueryは以下の様に、セレクタに >(子要素)が追加されol要素内のインデックス番号が2より大きいli要素を選択するようにしました。

$("button").click(function(){
	$("ol>li:gt(2)").css("background-color","#FCC");
});

結果として、buttonをクリックするとol要素内の下2つのli要素が選択されます。

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

$("button").click(function(){
	$("ol>:gt(2)").css("background-color","#FCC");
});

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

v1.8から負のインデックス番号が利用できるようになりました。サンプル(gt/04.html)を開いてbody内の構成がgt/01.htmlと同じ事を確認してください。jQueryは以下の様にセレクタgtの引数に-3が設定されています。結果としてbuttonをクリックすると最後から3番目より後の(インデックス番号が大きい)div要素が選択されます(引数に指定した最後から3番目の要素は含みません)

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

関連項目

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