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

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

.siblings( )兄弟要素を選択

構文

兄弟要素を選択返値:jQueryオブジェクト
jQo.siblings( [セレクタ] )ver1.0〜

機能

jQueryオブジェクトで指定した要素の兄弟要素(同じ階層の要素)でセレクタにマッチする要素を選択します。引数を設定しない場合はすべての兄弟要素を選択します。

解説

引数を設定しない

サンプル(siblings/01.html)を開いてul要素が2つあり、それぞれli要素を5つ持っていることを確認して下さい。このうち上のul要素の3番目のli要素にはtestの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>list item 5</li>
</ul>

jQueryは以下の様に記述され、buttonをクリックすると引数のないsiblingsメソッドによってtestのクラス属性が付いたli要素の兄弟要素をすべて選択します。選択した要素はcssメソッドを利用して背景を赤くしています。

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

結果として、buttonをクリックするとtestのクラス属性が付いたli要素の兄弟要素の背景色が赤くなります。
jQueryオブジェクトで指定したtestのクラス属性を持つli要素は選択されないことに注意してください。また、下のul要素にあるli要素は選択されません。兄弟要素とは同じ階層の要素だけです(下のul要素のli要素達は兄弟ではなく「いとこ」になります)。

引数を設定

サンプル(siblings/02.html)を開いてhtmlの構成がサンプルsiblings/01.htmlとほとんど同じ事を確認してください。異なるのは2つのul要素の最後のli要素に共にsampleのクラス属性が設定されている点です。

<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は以下の様に記述され、siblingsメソッドの引数にsampleのクラス属性が設定されています。

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

結果としては上のulのsampleのクラス属性があるli要素が選択され、背景色が赤くなります。siblingsメソッドは兄弟要素しか選択しないので、下のul要素内にあるli要素は選択対象となりません。

関連項目

兄弟用そのうち前の要素を選択したい場合はprevメソッドを利用します。
兄弟用そのうち次の要素を選択したい場合はnextメソッドを利用します。

メモ

メニューの作成に便利かもしれません

このメソッドはメニューの操作を容易にする目的で作成されたのでしょうか?試しにサンプルを作成してみました。サンプル(siblings/test01.html)を開いてjQueryが以下の様になっているのを確認してください。

$("li").click(function(){
	$(this).css("background-color","#f99");
	$(this).siblings().css("background-color","#fff");
})

2行目でクリックされたli要素の背景を赤にして、3行目でクリックされたli要素の兄弟要素(つまり自分以外)の背景色を白に戻しています。slblingメソッドは自分自身は選択しないので2行目の処理と重複しません

しかし、クリックされた要素を記憶し赤い背景のliだけを白に戻した方が効率が良いので、個人的には利用しないと思います。このあたりのテクニックはサンプルのタブメニュー等で紹介しています。