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

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

~(後要素)前要素の後にある要素を選択

構文

前要素の後に要素を選択
$("前要素 ~ 後要素")ver1.0〜
※~はマイナスではなくチルダです。

機能

要素を「~」で区切って記述することで、前要素の後ろにある要素を選択します。
+(直近の後要素)とは異なり、後要素が直後にある必要はありません。

解説

後ろにある要素を選択

サンプル(next-siblings/01.html)を開いてbody内の構成を確認して下さい。h1要素の後にp要素が3つあります。jQueryは以下の様に記述され、buttonをクリックするとh1要素の後ろにあるp要素が全て選択されます。選択された要素にはcssメソッドで赤枠を表示します。

$("button").click(function(){	
	$("h1~p").css("border","3px solid red");
});

結果として、buttonをクリックするとh1要素の後にある全てのp要素に赤枠が表示されます。

対象は同じ階層の要素のみ

~(後要素)では前要素と後要素が同じ階層でなければいけません
サンプル(next-siblings/01b.html)を開いてbody内の構成を確認して下さい。以下の様にdiv要素でp要素を囲み、p要素の階層が変わりました。jQueryはnext-siblings/01.htmlと同じです。

<h1>見出し</h1>
<div>
 <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
 <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
 <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>

その結果、buttonをクリックしてもp要素は選択されません。

直後にある必要はありません

~(後要素)は +(直近の後要素)と異なり、後要素が直後にある必要はありません。
サンプル(next-siblings/02.html)を開いてbody内の構成を確認して下さい。以下の様にh1要素とp要素の間にh2要素が追加され、h1要素の直後にp要素が存在していません(jQueryはサンプルnext-siblings/01.htmlと同じです)。

<h1>見出し</h1>
<h2>小見出し</h2>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>

しかしbuttonをクリックすると、h2要素を飛び越えp要素が全て選択されます。

注意点

~(後要素)は広範囲が対象になることに注意してください。サンプル(next-siblings/03.html)を開いてbody内の要素を確認して下さい。見出しが2つありますが、後の見出しはh1要素ではなくh2要素です。 ~(後要素)は同じ階層なら、どこまでも要素を選択してしまうのでh2の後ろにあるp要素も選択してしまいます。

メモ

Traversingのnextメソッドを利用

TraversingのnextAllメソッドを利用すれば「~(後要素)」と同じようなことが可能です。
サンプル(next-siblings/test01.html)を開いてhtmlの構成がnext-siblings/01.htmlと同じ事を確認してください。セレクタの部分をh1要素のみにし、続けてTraversingのnextAllメソッドでh1要素の後にある全てのp要素を選択します。

$("button").click(function(){
	$("h1").nextAll("p").css("border","3px solid red");
});

結果としてnext-siblings/01.htmlと全く同じになります。Traversingを利用するメリットについてはnextAllメソッドのページの「個人的なメモ」の項目を確認してください。