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

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

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

構文

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

機能

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

簡単にいうと:nth-of-type()の後から数えたバージョンです

解説

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

サンプル(nth-last-type/01.html)を開いてbody内に2つのdiv要素があることを確認してください。各div要素内には以下の様に4つのp要素が子要素として含まれています。

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

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

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

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

:nth-last-childとの違い

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

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

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

このサンプルでbuttonをクリックすると各div要素内の後から数えて1番目の(つまり最後の)p要素が選択されます。small要素はカウントされません。

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

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

結果としてbuttonをクリックすると上のdiv要素内のp要素は選択されません。これは:nth-last-child()は引数で指定した(後から1番目の)要素がセレクタのp要素と一致したら選択するという機能のためです。

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

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

:nth-last-child()と同じように引数にodd(奇数)/even(偶数)が利用できます。サンプル(nth-last-type/03.html)を開いてbody内の構成はnth-last-type/02.htmlとほとんど同じでp要素内に番目を入れているだけです。

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

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

結果として上下のdiv要素とも、後から数えて奇数番目のp要素が選択されます。上のdiv要素を確認すると分かるようにsmall要素はカウントされないことがポイントです。同じようにeven(偶数)を利用したサンプルも確認しておいて下さい。→サンプル(nth-last-type/03b.html

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

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

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

関連項目

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

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