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

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

:nth-of-typeセレクタと引数で指定された子要素を選択

構文

セレクタと引数で指定された子要素を選択
$("セレクタ:nth-of-type(引数)")ver1.9〜
※:(コロン)を忘れないように注意しましょう
※引数には様々な値を設定できます。解説を参照してください。
※セレクタで指定した要素のみ選択の対象となります。

機能

セレクタに続き:(コロン)nth-of-typeを設定するとセレクタと引数で指定された要素を選択します。:nth-child()と異なり、セレクタで指定した要素のみが選択の対象となります。

解説

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

サンプル(nth-type/01.html)を開いてbody内に2つのdiv要素があることを確認してください。各div要素内には以下の様に4つのp要素が子要素として含まれています。p要素の順番が分かりやすいように()内に番目を記載しました。

<div>
	<p>文字文字文字文字文字文字文字文字文字文字文字(1番目)</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字(2番目)</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字(3番目)</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字(4番目)</p>
</div>
<div>
	<p>文字文字文字文字文字文字文字文字文字文字文字(1番目)</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字(2番目)</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字(3番目)</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字(4番目)</p>
</div>

続いてjQueryを確認してください。以下の様に記述されbuttonをクリックすると子要素のp要素のうち、引数で指定した3番目の要素を選択し、cssメソッドを利用して背景色をピンクにしています。:nth-child同様にインデックス番号は1から始まります

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

結果として、各div要素内のセレクタで指定した最後のp要素だけが選択されピンクになります。

:nth-childとの違い

上記のサンプルnth-type/01.htmlで説明したことは:nth-childでも可能です(例:nth-child/02.html)ので、違いを確認するために別のサンプルを紹介します。

サンプル(nth-type/02.html)を開いてjQueryはnth-type/01.htmlから変更がないことを確認してください。body内の構成は以下の様に変更され、上のdiv要素内の先頭にh要素が追加されています。

<div>
	<h4>見出し(h要素なのでカウント対象外)</h4>
	<p>文字文字文字文字文字文字文字文字文字文字文字(1番目)</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字(2番目)</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字(3番目)</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字(4番目)</p>
</div>

このサンプルでbuttonをクリックすると各div要素内の3番目のp要素が選択されます。h要素はセレクタで指定されたp要素ではないためカウントされないことに注意して下さい。

では、同じ構成のhtmlに対して:nth-child()を利用するとどうなるかを確認します。
サンプル(nth-type/02b.html)を開いてbody内の構成はnth-type/02.htmlと同じ事を確認してください()内の説明は変更しています。jQueryは以下の様に記述され:nth-of-typeの代わりに:nth-childを利用しています。

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

:nth-child()はセレクタで指定しているp要素にかかわらず追加されたh 要素もカウントします。

この違いを確認するために、もう1つサンプルを確認します。サンプル(nth-type/03.html)を開いてbody内の上のdiv要素が以下の様に変更されているのを確認して下さい。h要素が3番目の位置に移動しています。

<div>
	<p>文字文字文字文字文字文字文字文字文字文字文字(1番目)</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字(2番目)</p>
	<h4>見出し(h要素なのでカウント対象外)</h4>
	<p>文字文字文字文字文字文字文字文字文字文字文字(3番目)</p>
	<p>文字文字文字文字文字文字文字文字文字文字文字(4番目)</p>
</div>

jQueryはnth-child/02.htmlから変更されていません。buttonをクリックすると上のdiv要素でh要素はカウントされず、3番目のp要素が選択されることを確認して下さい。

それに対し:nth-child()では3番目の要素がp要素でないため、上のdiv要素の子要素は選択できません。サンプル(nth-child/06b.html)でbuttonをクリックし上のdiv要素では子要素が選択されないのを確認してください。

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

このように:nth-of-type()と:nth-child()は似ていますが、考え方が異なるので間違えないように気を付けてください。

引数にodd/evenや数式が利用できるのは:nth-childと同じです

:nth-child()と同じように引数にodd(奇数)/even(偶数)が利用できます。サンプル(nth-type/04.html)を開いてbody内の構成はnth-type/03.htmlと同じことを確認して下さい。

jQueryは以下の様に変更され、:nth-of-typeの引数にodd(奇数)が設定されているのを確認して下さい。

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

結果として上下のdiv要素とも奇数番目のp要素が選択されます。上のdiv要素を確認すると分かるように、途中にあるh要素はやはりカウントされません。同じようにeven(偶数)を利用したサンプルも確認しておいて下さい。→サンプル(nth-type/04b.html

あとnを利用した数式も利用できます。サンプル(nth-type/05.html)を開いてbody内の構成はnth-type/04.htmlと同じことを確認して下さい。jQueryは以下の様に変更され、引数に「3n+1」と設定されています。

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

nは0から始まる整数なので、1番目(3*0+1 = 1)と4番目(3*1+1 = 4)のp要素が選択されます。ここでも途中にあるh要素はカウントされていません。このようにセレクタで指定した要素以外はカウントされないことが:nth-child()との違いなので覚えておきましょう。

関連項目

後から数えた要素を選択したい場合は:nth-last-of-type()を利用して下さい。
似たような機能の:nth-child()を確認して、違いを理解し、混乱しないようにしましょう。

メモ

n(自然数)について

サンプル(nth-type/05.html)の説明で数式のnは0から始まると説明しており、実際その通りの番目が選択されます。しかしnは自然数(Natural number)を意味しているので1から始まるのでは?と思っていました。しかし調べてみると日本では1から始めますが、世界的には0から始めるケースもあるようです。気になったのでメモ。
→参考:wikipedia「自然数