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

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

.addBack( )現在の要素と以前の要素を選択

構文

現在の要素と以前の要素を選択返値:jQueryオブジェクト
jQo.addBack( [セレクタ] )ver1.8

機能

andSelfメソッドの進化バージョンです。引数にセレクタを指定してフィルタリングする事ができるようになりました。それ以外はandSelfメソッドと同じで、Traversingのメソッドによって選択されている要素が変化したとき現在選択されている要素に加え、Traversing等で変化する前の要素を選択します。

解説

現在の要素と以前の要素を選択します

サンプル(addBack/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要素が選択されます。

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

addBackメソッドは現在選択されている要素(4番目のli要素)と、Traversing(nextメソッド)で変化する前の要素(3番目のli要素)を両方とも選択します。これにcssメソッドで背景色を変えているため、クリックすると3番目と4番目のli要素の背景色が変わります。

引数を設定してフィルタリング

addBackメソッドは引数にセレクタを設定することでフィルタリングする事ができます。
サンプル(addBack/02.html)を開いて、body内の構成が変更されていることを確認して下さい。以下の様に4番目のli要素にid属性sampleが追加されています。

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

jQueryは以下の様にaddBackメソッドの引数にid属性sampleの指定が追加されています。

$("button").click(function(){
	$("li.test").next().addBack("#sample").css("background-color","#f99");
})

結果として、buttonをクリックするとaddBack/01.htmlと異なり、4番目のli要素しか選択されません。これは引数に設定したid属性sampleでフィルタリングされ、3番目のli要素が選択から外れたためです。

関連項目

以前の要素だけを選択したい場合はendメソッドを利用します。