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

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

:last-child最後の子要素を選択

構文

最後の子要素を選択
$("セレクタ:last-child")ver1.1.4〜
※:(コロン)を忘れないように注意しましょう
※最後の子要素がセレクタと一致しない場合は選択されません。

機能

セレクタに続き:(コロン)last-childを設定すると親要素内にある最後の要素を選択します。:lastと異なり、ページを通したインデックス番号で管理されることはなく、最後の子要素をまとめて選択したいときに便利です。

また指定したセレクタが最後の子要素でない時は選択されないことに注意してください。セレクタで指定した最後の子要素を選択したい場合は:last-of-typeを利用してください。

解説

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

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

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

:last-childでポイントなのは、ページ全体で最後の要素が選択されるのではなく親要素の範囲内での最後の要素が選択される点です。ですのでサンプルlast-child/01.htmlではol内で最後のli要素と、ul内で最後のli要素が選択されるのです。

参考として:lastのサンプルを紹介します。サンプル(last-child/01b.html)を開いてbody内の構成はサンプルlast-child/01.htmlと同じ事を確認してください。jQueryのセレクタを以下の様に:lastに変更しただけです。

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

:lastの場合は親要素に関わらずページ全体で最後のliが選択されるためolの最後のli要素は選択されません。2つの違いを理解して混乱しないようにしましょう。

色々な要素で利用できます

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

$("button").click(function(){
	$("p:last-child").css("border","3px solid red");
});

結果として、buttonをクリックすると各div要素内で最後のp要素が選択され、背景色がピンクになります。

最後の子要素限定です

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

:last-childの注意点としては指定したセレクタが最後の子要素でないといけない点です。
サンプル(last-child/03.html)を開いてjQueryが前項のlast-child/02.htmlと同じ事を確認してください。

$("button").click(function(){
	$("p:last-child").css("border","3px solid red");
});

続いてbody内の構成を確認すると、上のdiv要素内の最後にsmall要素が追加され、これが最後の子要素となっています。

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

その結果、buttonをクリックしても上のdiv要素にあるp要素は選択されません。これは最後の子要素がセレクタで指定したp要素ではないためです。もし上のdiv要素でも最後のp要素を選択したい場合はv1.9で追加された:last-of-typeを利用してください。

この構成で各div要素内の最後の要素を種類にかかわらず選択するサンプルはページ最下段のメモ「最後の子要素を要素にかかわらず選択」で紹介しています。

関連項目

最初の子要素を選択したい場合は:first-childを利用します。
ページを通して最後の要素を選択したい場合は:lastを利用します。
セレクタで指定した最後の要素を選択したい場合は:last-of-typeを利用します。

メモ

最後の子要素を要素にかかわらず選択

サンプルlast-child/03.htmlを作成して思ったのですが、もし要素にかかわらず最後の子要素を選択(つまりsmall要素も選択)したい場合はどう記述すれば良いのでしょうか?

:last-childに>(子要素)を組みあわせることで実現できました。サンプル(last-child/test01.html)を開いてbody内の構成がfirst-child/03.htmlと同じ事を確認してください。jQueryは以下の様に変更されています。

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

これでdiv要素の子要素で最後の要素が選択されるようになります。実際にbuttonをクリックするとsmall要素もp要素も選択されます。

上記のサンプルは少し省略しており、厳密に書くのであれば、以下の様に*(すべて)を使います。つまり「div要素内の最後の要素は何でも」選択という意味です。→参考:サンプル(last-child/test01b.html

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

実際にサンプル(last-child/test01b.html)でbuttonをクリックするとlast-child/test01.htmlと同じようにsmall 要素もp要素も選択されます。