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

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

:nth-child()引数で指定した子要素を選択

構文

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

機能

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

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

解説

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

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

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

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

:nth-childはulとliのような決まった親子関係以外の構造でも利用できます。サンプル(nth-child/02.html)を開いてbody内の構成を確認してください。div要素内にp要素がある構造が2つあります。jQueryは以下の様に記述され、buttonをクリックすると親要素であるdiv要素内の3番目のp要素を選択します。

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

結果として、buttonをクリックすると各div要素内の上から3番目のp要素が選択され背景色がピンクになります。

引数にoddやevenを利用

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

サンプル(nth-child/03.html)を開いてbody内の構成がnth-child/01.htmlと同じ事を確認してください。jQueryは以下の様に記述され、buttonをクリックすると親要素内にある偶数番目のli要素を選択します。

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

結果として、buttonをクリックするとul要素/ol要素内にある2番目と4番目のli要素が選択され背景色がピンクになります。基本フィルタの:even等がページ内を通したインデックス番号で管理されるのに対し、このnth-childのeven/oddは親要素ごとに管理されるので、複数のリストに同じように設定したい場合は便利です。

参考として基本フィルタの:evenを利用したサンプル(nth-child/03b.html)を確認してください。ol要素のリストでは0から始まる偶数のli要素が選択できていますが、ulでは奇数を選択しているように見えます。しかしこれは間違いではなく、連番で管理されるためli要素の文章中にある()内の数値に基づき選択されているのです。2つの違いを理解して混乱しないようにしましょう。

引数に数式を利用

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

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

もう1つサンプルを用意しました。サンプル(nth-child/05.html)を確認してください。body要素内の構成はnth-child/04.htmlと同じですが、nth-childの引数が「3n+1」に変更されています。そのため3の倍数に1足した番目のli要素が選択されます(nが0のときは1となるので1番目の要素も選択されます)。

:nth-of-typeとの違い

この項はv1.9で:nth-of-typeが追加されたことに対し、違いを明確にするために追記されました。

:nth-child()で注意しないといけないのは、セレクタで指定した要素をカウントしているわけではない点です。サンプル(nth-child/06.html)を開いてjQueryはnth-child/02.htmlと同じ事を確認してください。ここで確認しておくのは、以下の様にセレクタにp要素、引数に3を設定している点です。

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

ここで「3番目のp要素が選択される」と勘違いしやすいので注意してください。実際は「3番目の要素がp要素なら選択される」です。

続いてbody内の構成を確認してください。以下の様に上のdiv要素内にh要素が追加し、さらに子要素の順番が分かりやすいように()内に番目を追加しました。

<div>
	<h4>見出し(1番目)</h4>
	<p>文字文字文字文字文字文字文字文字文字文字文字(2番目)</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字(3番目)</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字(4番目)</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字(5番目)</p>
</div>

ではbuttonをクリックして上のdiv要素で、どのp要素が選択されるか確認してください。h要素も含めて3番目の要素が選択されるはずです。理解を深めるために、もう1つサンプルを確認します。

サンプル(nth-child/06b.html)を開いて、上のdiv要素内の構成が以下の様に変更されているのを確認してください。h要素が3番目に移動されています。

<div>
	<p>文字文字文字文字文字文字文字文字文字文字文字(1番目)</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字(2番目)</p>
	<h4>見出し(3番目)</h4>
	<p>文字文字文字文字文字文字文字文字文字文字文字(4番目)</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字(5番目)</p>
</div>

jQueryはnth-child/06.htmlから変更ありません。このサンプルでbuttonをクリックしても上のdiv要素の子要素は選択されません。それは3番目の要素がp要素ではなくh要素のためです。このことからも「p:nth-child(3)」が「3番目の要素がp要素なら選択される」という機能なのを確認できます。

この考え方は引数にeven/oddや数式を利用した時にも適用されます。サンプル(nth-child/07.html)を開いてbody内の構成に変更がないことを確認して下さい。jQueryは以下の様に:nth-childの引数に「odd」が設定され奇数番目の要素を選択するようにしています。

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

buttonをクリックすると、奇数のp要素が選択されますが上のdiv要素では3番目の要素がp要素でないため選択されません。指定した要素のみをカウントして選択したい場合は:nth-of-type()を利用してください。

また数式(3の倍数の要素を選択するように3nを指定)のサンプルも用意しましたが、同じように指定した番目の要素がp要素でないと選択されません。→nth-child/08.html

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

関連項目

後から数えた要素を選択したい場合は:nth-last-child()を利用して下さい。

似たような機能の:nth-of-type()を確認して、違いを理解し、混乱しないようにしましょう。
引数にeven/oddを利用する用法は:even:oddと合わせて覚えて、混乱しないようにしましょう。