初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ

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

:last-of-typeセレクタで指定された最後の子要素を選択

構文

セレクタで指定された最後の子要素を選択
$("セレクタ:last-of-type")ver1.9〜
※:(コロン)を忘れないように注意しましょう
※セレクタで指定した要素のみを対象とします。

機能

セレクタに続き:(コロン)last-of-typeを設定すると親要素内にあるセレクタで指定された最後の要素を選択します。:last-childと異なり、セレクタで指定した要素が最後の子要素である必要はありません。

解説

最後の子要素を選択します

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

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

続いてjQueryを確認してください。以下の様に記述されbuttonをクリックするとp要素のうち最後の子要素を選択して、cssメソッドを利用して背景色をピンクにしています。

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

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

:last-childとの違い

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

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

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

このサンプルでbuttonをクリックすると各div要素内の最後のp要素が選択されます。

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

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

:last-childは子要素の最後に指定したセレクタがないと選択されないため、上のdiv要素内のp要素は選択されません(最後の子要素はsmall要素のため)。たぶん、このことが:last-childを使いにくくしているため、v1.9で:last-of-typeが追加されたのではないかと思います。

関連項目

セレクタで指定した最初の子要素を選択したい場合は:first-of-typeを利用します。
また、似たような機能の:last-childを確認して、違いを理解し、混乱しないようにしましょう。