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

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

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

構文

以前の要素と現在の要素を選択返値:jQueryオブジェクト
jQo.andSelf( )ver1.2〜1.8
※v1.8で非推奨になりました

機能

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

v1.8で非推奨となりました。代わりにaddBackメソッドを利用して下さい。

解説

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

サンプル(andSelf/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().andSelf().css("background-color","#f99");
})

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

関連項目

以前の要素だけを選択したい場合はendメソッドを利用します。
v1.9を利用する場合は、代わりにaddBackメソッドを利用して下さい。

メモ

実用的なサンプルが思いつきません。無理矢理な感じですがサンプルを作成しました。サンプル(andSelf/test01.html)ではh1の見出しと、それに続くリード文、記事が2セットあります。

jQueryは以下の様に記述され、buttonをクリックするとh2見出しが選択され、その後でnextメソッドによってリード文に移ります。この段階でcssメソッドを利用して背景色を赤くしているため、リード文の背景が赤くなります。次にandSelfメソッドがあるので、現在選択されているリード文とnextメソッドで変換する前の見出し要素が選択されます。これにcssメソッドで文字色を青くしているため、見出しとリード文が青く変わります。

$("button").click(function(){
	$("h2").next().css("background-color","#f99").andSelf().css("color","#00f");
})

引数を設定することができない分、addメソッドなどと比べると使いどころが少ないような気がしますが、andSelf/01.htmlなどの用法はaddメソッドではできないため覚えておきましょう。