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

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

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

構文

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

機能

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

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

解説

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連項目

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