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

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

+(直近の後要素)直後にある要素を選択

構文

前要素の直後にある要素を選択
$("前要素 + 後要素(直後のみ)")ver1.0〜

機能

要素を「+」で区切って記述することで、前要素の直後にある要素を選択します。直後の要素が1つしか選択されないことに注意してください。後要素を全て選択したい場合は ~(後要素)を利用します。

条件が厳しいので利用頻度は低いかもしれません。しかし直後の要素しか調べないため処理速度は高速です。

解説

直後にある要素を選択

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

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

結果として、buttonをクリックすると最初のp要素だけに赤枠が表示されます。

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

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

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

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

指定した要素が直後にないといけません

後要素として設定した要素は前要素の直後にないといけません。サンプル(next-adjacent/01c.html)を開いてbody内の要素を確認して下さい。以下の様にh1要素とp要素の間にh2要素が追加され、h1要素の直後にp要素が存在していません(jQueryはnext-adjacent/01.htmlと同じです)。

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

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

*(すべて)との組合せ

もし直近の要素を任意に選択したい場合は、後要素に *(すべて)を利用すると良いでしょう。
サンプル(next-adjacent/02.html)を開いてbody内の構成を確認して下さい。h1要素は2つあり、最初のh1要素の直後にはh2要素、次のh1要素の直後にはp要素があります。jQueryは以下の様に記述したので、h1要素の直後であれば要素の種類を問わず選択されます。

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

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

メモ

Traversingのnextメソッドを利用

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

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

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