jQueryを使用して、HTML要素の親要素、子要素、および隣接要素を指定する方法を説明します。
以下の例では、基本的なセレクタを使用してこれらの要素を特定します。
- 親要素の指定: 親要素は、指定した要素の直接の上位にある要素です。親要素を指定するには、子要素に対するセレクタを使用します。たとえば、以下のHTMLコードがあるとします。
<div id="parent"> <p>子要素</p> </div>
この場合、子要素<p>の親要素<div>を指定するjQueryセレクタは次のようになります。$("#parent") - 子要素の指定: 子要素は指定した要素の直接の下位にある要素です。子要素を指定するには、親要素に対するセレクタを使用します。たとえば、以下のHTMLコードがあるとします。
<div id="parent"> <p>子要素</p> </div>この場合、親要素<div>の子要素<p>を指定するjQueryセレクタは次のようになります。$("#parent > p") - 隣接要素の指定: 隣接要素は、同じ親要素内に存在し、指定した要素の隣にある要素です。隣接要素を指定するには、指定した要素の後ろに続く要素を指定するセレクタを使用します。たとえば、以下のHTMLコードがあるとします。
<div> <p>要素1</p> <p>要素2</p> </div>この場合、最初の<p>要素に隣接する2番目の<p>要素を指定するjQueryセレクタは次のようになります。$("p:first + p")このセレクタは、最初の<p>要素の直後に続く<p>要素を選択します。
これらの例を参考にして、jQueryを使用してHTML要素の親要素、子要素、および隣接要素を指定する方法を理解してください。セレクタを適切に使用することで、特定の要素に対して操作を実行できます。
Findメソッド
findメソッドは、すべての子孫要素(自分よりも下の階層の要素すべて）の中から、指定したセレクタを持つ要素を取得したいときに用います。下図の例では、<div id=”wrapper”>から</div>の中にあるすべての<a>要素を取得することができます。
childrenメソッドは、指定したセレクタが持つ子要素（一階層だけ下）の中から指定したセレクタに合致した要素を取得したいときに用います。下の例では<div id=”wrapper”>の子要素は<a>タグと<p>タグが1つずつなので、<a>タグが1つ取得されます。
| parents([セレクタ]) | 先祖要素 |
|---|---|
| parent([ セレクタ ]) | 親要素 |
| prev([ セレクタ ]) | 前の要素（兄要素） |
| prevAll([ セレクタ ]) | 全ての兄要素 |
| next([ セレクタ ]) | 次の要素（弟要素） |
| nextAll([ セレクタ ]) | 全ての弟要素 |
| siblings([ セレクタ ]) | 全ての兄弟要素 |
| children([ セレクタ ]) | 子要素（孫要素は対象外） |
カレント要素（＝jQueryオブジェクトが示す要素）を基点として、親子、もしくは兄弟関係にある要素を取得するには、以下のようなメソッドを利用します。
<div>
<ul>
<li class=”menu01″><span class=”sp01″>メニュー01</span></li>
<li class=”menu02″><span class=”sp02″>メニュー02</span></li>
<li class=”menu03″><span class=”sp03″>メニュー03</span></li>
</ul>
</div>
$(this)の親要素、先祖要素を指定する
$(“li”).click(function(){
$(this).parent() //①
$(this).parent(“ul”) //②
});
①すぐ上の親要素を指定（それより上は指定できません）
②先祖要素を指定（parent()より上にさかのぼることができます）
上記のソースの場合、②ならdivを指定できますが、①ではulのみです
$(this)の隣接要素を指定する（前の要素）
jQueryオブジェクトで指定した要素の同じ階層の要素（兄弟要素）で「前の要素だけ」を選択します。
prevメソッドは、 カレント要素 の直前の要素しか判断できませんので、この点に注意してください。
nextメソッドも同様に直後の要素だけ判断します。
引数を設定することで選択する要素を絞ることができます。
解説
$(“li”).click(function(){
//前
$(this).prev(“li”) //④
$(this).prevAll(“li”) //⑤
});
兄弟要素（同じ階層の要素）で「前の要素だけ」を選択する。
１つだけ選択される
（）内は.menu03をクリックした場合に指定される要素
④すぐ前にある要素を指定（.menu02）
⑤前にある全ての要素を指定（.menu02、.menu01）
$(“li”).click(function(){
//次
$(this).next(“li”) //①
$(“+li”,this) //②
$(this).nextAll(“li”) //③
});
（）内は.menu01をクリックした場合に指定される要素
①②すぐ次にある要素を指定（.menu02）
③次以降にある全ての要素を指定（.menu02、.menu03）
コメント