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

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

.end( )以前の要素を選択

構文

以前の要素を選択返値:jQueryオブジェクト
jQo.end( )ver1.0〜

機能

jQueryではTraversingのメソッドによって選択されている要素が動的に変化していきます。endメソッドはTraversing等で変化する前の要素を選択します。

解説

以前の選択に戻る

endメソッドは「終わり」というよりも「戻る」という機能だと思います。サンプル(end/01.html)を開いてul要素内にli要素が5つ(3番目のli要素にはtestのクラス属性が付いています)あることを確認して下さい。

<ul>
	<li>list item 1</li>
	<li>list item 2</li>
	<li class="test">list item 3</li>
	<li>list item 4</li>
	<li>list item 5</li>
</ul>

jQueryは以下の様に記述され、buttonをクリックすると、まずtestのクラス属性が付いた(3番目)li要素が選択されます。そしてnextメソッドにより次(4番目)のli要素が選択され、cssメソッドによって背景色を赤に変更します。そしてendメソッドによってnextメソッドで選択が変わる前の状態(testのクラス属性を持ったli要素)に戻され、cssメソッドによって背景色を青に変更します。

$("button").click(function(){
		$("li.test").next().css("background-color","red").end()
.css("background-color", "blue"); })

結果として、buttonをクリックすると3番目のli要素の背景が青くなり、4番目のli要素の背景が赤くなります。

関連項目

現在選択されている要素と合わせて以前の要素を選択したい場合はaddBackメソッドを利用します。

メモ

どの様な時に利用するのだろう?

本家のページのサンプルを見ると、起点とする要素からトラバースで移動し、変更が完了したらendメソッドで起点に戻り、またトラバースを利用して別の要素を変更するという利用方法なのだと思うのですが...。

とりあえず本家のサンプルをよりシンプルにしたサンプルを作成しました。サンプル(end/test01.html)を開いてbody内の構成が以下の様になっているのを確認してください。liにはtestとsample、2つのclass属性が設定されています。

<ul>
	<li>list item 1</li>
	<li>list item 2</li>
	<li class="test">list item 3</li>
	<li>list item 4</li>
	<li class="sample">list item 5</li>
</ul>

jQueryは以下の様に記述され、buttonをクリックすると起点となるul要素を選択肢、そこからfindメソッドでtestのクラス属性を持つ子要素を選択して背景色をcssメソッドで赤くし、そこからendメソッドで再び起点のul要素に戻り、そこからまたfindメソッドを利用してsampleのクラス属性をもつ要素を青くしています。

$("button").click(function(){
	$("ul")
	.find(".test")
		.css("background-color","red")
	.end()
	.find(".sample")
		.css("background-color", "blue")
	.end();
})

本家サイトでは上記のようにインデントを付けてendメソッドで終わらせることで分かりやすくするとのことです。

しかし、行ったり戻ったりせずに以下の様に書いた方が分かりやすいのではないでしょうか?
サンプル(end/test01b.html)で確認できますが、まったく同じように動作します。

$("button").click(function(){
	$("ul>.test").css("background-color","red");
	$("ul>.sample").css("background-color", "blue");
})

使い方「トラバースによる高速化を検証」のように速度的なメリットもないとすればendメソッドを利用するメリットは何なのでしょう?...もう少し経験を積めば見えてくるのでしょうか?