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

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

:nth-last-child()後から数えた引数で指定した子要素を選択

構文

後から数えた引数で指定した子要素を選択
$("セレクタ:nth-last-child(引数)")ver1.9.0〜
※:(コロン)を忘れないように注意しましょう。
※引数には様々な値を設定できます。解説を参照してください
※引数で指定した子要素がセレクタと一致しない場合は選択されません。
※nth-child()の後から数えたバージョンです。

機能

セレクタに続き:(コロン)nth-last-of-child()を設定すると親要素内にあるセレクタで、後から数えた引数で指定した要素を選択します。引数にはインデックス番号の他、数式も利用できます(詳しくは解説を確認してください)。簡単にいうと:nth-child()の後から数えたバージョンです

引数で指定した要素がセレクタと一致しない場合は選択されないことに注意してください。これについては解説「セレクタと引数の指す要素が一致した時のみ」で詳しく説明しています。

解説

引数にインデックス番号を利用

引数にインデックス番号を利用することで、「後から」指定した番号の要素を選択できます。このときインデックス番号は1から始まることに注意してください。セレクタのeq( )等、基本フィルタのインデックス番号は0から始まっていました。※これはcss3のnth-childの仕様に合わせての対応だと思います

サンプル(nth-last-child/01.html)を開いてbody内にol要素とul要素のリストがあることを確認して下さい。各リストにはli要素が5つあります。jQueryで以下の様記述され、複数のセレクタ(and)を利用してli要素と組みあわせました。そのためbuttonをクリックすると親要素内にある「後から1番目のli要素」を選択します。選択した要素はcssメソッドを利用して背景色をピンクにします。

$("button").click(function(){
	$("li:nth-last-child(1)").css("background-color","#FCC");
});

結果として、buttonをクリックするとul要素内、ol要素内の最後(後から1番目)のli要素が選択され背景色がピンクになります。

引数にoddやevenを利用

引数にはodd(奇数)とeven(偶数)のキーワードを利用することができます。セレクタの基本フィルタにある:even:oddとにていますがインデックス番号が1から始まる点に注意してください。

サンプル(nth-last-child/02.html)を開いてbody内の構成がnth-last-child/01.htmlと同じ事を確認してください。jQueryは以下の様に記述され引数にodd(奇数)が設定されています。

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

結果として、buttonをクリックするとul要素/ol要素内にある「後から」1,3,5番目のli要素が選択され背景色がピンクになります。

基本フィルタの:even等がページ内を通したインデックス番号で管理されるのに対し、このnth-last-childのeven/oddは親要素ごとに管理されるので、複数のリストに同じように設定したい場合は便利です。

さらに引数:even(偶数)を利用したサンプル(nth-last-child/02b.html)を確認してください。「後から」2,4番目のli要素が選択されます。

引数に数式を利用

引数にan+b(nは0から始まる整数、a,bは任意の整数)を設定することができます。これを利用すると「3つおきに要素を選択すること」などの複雑な選択が可能になります。サンプル(nth-last-child/03.html)を開いてbody内の構成がnth-last-child/01.htmlと同じ事を確認してください。jQueryは以下の様にnth-childの引数に「3n+1」が設定されておます。

$("button").click(function(){
	$("li:nth-last-child(3n+1)").css("background-color","#FCC");
});

結果として、buttonをクリックするとol/ul要素内の1番目(3*0+1)と4番目(3*1+1)のli要素が選択され背景色がピンクになります。

セレクタと引数の指す要素が一致した時のみ

:nth-last-child()で注意しないといけないのは、セレクタで指定した要素をカウントしているわけではない点です。サンプル(nth-last-child/04.html)を開いてbody内にdiv要素が2つあり、各div要素内には4つのp要素があることを確認して下さい

<div>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
<div>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
</div>

続いてjQueryを確認して下さい。セレクタにp要素、引数に1を設定しています。そのためbuttonをクリックすると各div要素内の後から数えて1番目(つまり最後)のp要素が選択され背景色がピンクになります。

$("button").click(function(){
	$("p:p:nth-last-child(1)").css("background-color","#FCC");
});

では続いてサンプル(nth-last-child/04b.html)を開いて上のdiv要素の最後にsmall要素が追加されているのを確認して下さい。

<div>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字</p>
	<small>※捕捉捕捉捕捉捕捉捕捉捕捉捕捉捕捉捕捉捕捉</small>
</div>

jQueryはnth-last-child/04.htmlから変更していません。ここで「後から1番目のp要素が選択される」と勘違いしやすいので注意してください。実際は「後から1番目の要素がp要素なら選択される」です。

ではbuttonをクリックして、上のdiv要素でp要素が選択されるか確認してください。最後から1番目の要素がp要素ではなくsmall要素のためセレクタと一致しません。そのため上のdiv要素ではp要素は選択されないのです。

もし「後から数えて1番目のp要素を選択したい」場合は:nth-last-of-type()を利用してください。

関連項目

前から数えた要素を選択したい場合は:nth-child()を利用して下さい。
引数にeven/oddを利用する用法は:even:oddと合わせて覚えて、混乱しないようにしましょう。

似たような機能の:nth-last-of-typed()を確認して、違いを理解し、混乱しないようにしましょう。