jQueryでボタンとかをクリックしたときのエフェクト。
後処理とかの都合で他のセクションにクラスを付与したい時があると思うのですが、そのときに必須なのが「親要素の取得」。
色々種類がありますが、これはjQueryをコーディングするうえで全部知って、使い分けたほうが良いので、メモしておきます。
今回は、1パターンのHTML（idとかだけちょっと違う）をベースに、jQueryのプロパティだけ変えて同じ指定をしてみました！
なのでどのように親要素を取得しているか解りやすいかと思います。
具体的には、親要素に赤い枠線が付きます。
ベースとなるHTMLは以下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id=“【IDだけ変えてます。】” class=“div3”> <header> <h1>.parents()</h1> </header> <div class=“div2”> <div class=“div1”> <button><strong>clickするとborderがつきます</strong>。その違いで各プロパティの動作の違いが解りやすいかと思います。</button> </div> <p>JQUERY</p> <code> 【ここにjQueryコードが入っている】 }); </code> </div> </div> |
するためのデモ
.parent()
直近の親要素を取得します。
例えばボタンをクリックして、その一個上の親要素を取得したい場合には最適です。
引数にタグなどを指定することで、引数と合致する親要素のときのみ取得します。
以下の例だと、親要素がdivのときだけborderをつけています。
1 2 3 4 | //////.parent() $(‘#parent , #parent-nondiv’).on(‘click’ , ‘button’ , function(){ $(this).parent(“div”).css(“border”,“3px solid red”); }); |
.parents()
親要素、先祖要素まで取得します。
ボタンをクリックして、そのボタンが結構HTML上でネストされていた場合には便利です。
引数にタグなどを指定することで、引数と合致する要素を全て取得します。
以下の例の場合だと、button以上のdiv全てにborderをつけています。
DOMの監視範囲が広いため、処理は比較的遅め。
1 2 3 4 | //////.parents() $(‘#parents’).on(‘click’ , ‘button’ , function(){ $(this).parents(“div”).css(“border”,“3px solid red”); }); |
.closest()
親要素、先祖要素のうち、引数に指定したタグやクラス、idと合致する要素で、
アクションを起こした要素から見て、直近の要素を取得します。
例えば、ボタンをクリックして、そのボタンから見て親要素や先祖要素の内で.closest(引数)に指定した「引数」と合致するものが見つかるまで遡るということです。
以下の例だと、buttonから一番近い親要素のdivにborderをつけています。
1 2 3 4 | //////.closest() $(‘#closest , #closest-nondiv’).on(‘click’ , ‘button’ , function(){ $(this).closest(“div”).css(“border”,“3px solid red”); }); |
いかがでしたか。
実はまだparentsUntil()という、検索範囲を指定できるものもあります。しかし、使いどころが全くわからないことと少し眠いため今回は説明を割愛いたします。
リンクを貼っておくのでぜひ学んでおきましょう！ちなみに未だかつて使おうとも思ったことがないしなんなら”あ、これだ！”と閃いたこともありません。
しかし…こういうの、Javascriptでそのままやろうと思うともっと面倒なんですよね。
ホントjQueryには頭があがりません。
でわ！
