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

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

:last最後の要素を選択

構文

最後の要素を選択
$(":last")ver1.0〜
※:(コロン)を忘れないように注意しましょう

機能

:(コロン)に続けてlastを設定すると最後の要素を選択します。

解説

単独では利用しません

サンプル(last/01.html)を開いてbody内にdiv要素が4つあることを確認してください。jQueryは以下の様に記述され、buttonをクリックすると最後の要素を選択するようにしています。選択した要素はcssメソッドを利用してボーダーを表示しています。

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

結果として、buttonをクリックするとhtml内の最後の要素であるbuttonが選択され赤枠が表示されます。
:firstと同様に単独で利用することはないでしょう。

他のセレクタと組みあわせる

サンプル(last/02.html)を開いてbody内の構成がlast/01.htmlと同じ事を確認してください。jQueryは以下の様に記述され、buttonをクリックすると複数のセレクタ(and)を利用してdiv要素で最後の要素を選択します。選択された要素はcssメソッドを利用して背景色を緑にします。

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

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

ページ全体を通しての最初です

要素はページ内を通してインデックス番号で管理されます。サンプル(last/03.html)を開いてbody内にol要素とul要素の2つのリストがあることを確認して下さい。各リストにはli要素が5つづつあります。

jQueryは以下の様に記述され、buttonをクリックするとli要素の最後の要素を選択しcssメソッドを利用して背景色をピンクにします。

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

ul要素とol要素は異なるリストですが、li要素はulとolで共通のためul/olを通して連続したインデックス番号が設定されます。その結果、buttonをクリックするとul要素の最後のli要素が選択され、背景色がピンクになります。

ol要素内にある最最後のli要素を選択するには?

ではol要素の中にある最後のli要素を選択したい場合はどうすればよいのでしょうか?
サンプル(last/04.html)を開いてbody内の構成を確認してください。li要素のテキストが異なるだけで、それ以外はサンプルlast/03.htmlと同じになっています。

jQueryは以下の様に記述され、buttonをクリックすると>(子要素)を利用して、ol要素の直下にあるli要素の最後の要素を選択するようにしました。

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

サンプルlast/04.htmlではol要素内にli要素しかないので、liの記述は省略しても同じです。サンプル(last/04b.html)を開いてjQueryが以下の様に変更されていることを確認して下さい。しかし選択される要素はサンプルlast/04.htmlと同じになります。

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

関連項目

最初の要素を選択する:firstと合わせて覚えると良いでしょう。
要素ごとに最後の要素を選択したい場合(サンプルではolとulの最後のliを両方まとめて選択したい場合)は:last-childを利用すると便利です。

メモ

最後の要素を選択したい対象が、すでにjQueryオブジェクトになっている場合はTraversingのlast()を利用したほうが高速に処理できます。詳細はlast()ページの「メモ」を確認してください。