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

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

.last( )最後の要素を選択

構文

最後の要素を選択返値:jQueryオブジェクト
jQo.last( )ver1.4〜

機能

jQueryオブジェクトで指定した要素のうち最後の要素を選択します。

解説

最後の要素を選択します

サンプル(last/01.html)を開いてul要素が2つあり、それぞれli要素を5つ持っていることを確認して下さい。jQueryは以下の様に記述され、buttonをクリックするとli要素のうち、最後の要素を選択します。選択した要素はcssメソッドを利用して背景を赤くしています。

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

結果として、buttonをクリックすると最後のli要素が選択されます。

関連項目

指定したインデックス番号を持つ要素を選択したい場合はeqメソッドを利用します。
特定の範囲のインデックス番号を持つ要素を選択したい場合はsliceメソッドを利用します。
最初の要素を選択したい場合はfirstメソッドを利用します。

メモ

セレクタにも似たものがあります

セレクタの:lastを利用すればlastメソッドと同じようなことが可能です。サンプル(last/test01.html)を開いてbody内の構成がサンプルlast/01.htmlと同じ事を確認してください。

jQueryはセレクタの部分をセレクタの:lastを利用したものに置き換えただけです。buttonをクリックするとサンプルlast/01.htmlと同じ結果になることを確認して下さい。

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