jQueryで親・子・兄弟要素を取得する方法まとめ
CSSで色々できるようになったとはいえ、まだまだjQueryを使う場面もありますよね！というわけで、勉強がてらjQueryで要素を取得する方法をまとめてみました。
目次
親要素系を取得する
起点となる要素の「親要素」を取得するタイプもろもろです。#originをクリックすると、対象の.selectが処理される（ここでは.activeというclassを追加しています）ようにjQueryを記述しました！
.parent()〜直上の親要素を取得〜
※Clickを押すと、取得した要素の色が変わります。
See the Pen JGEwjv by Jomo (@commonsense-design) on CodePen.
jQuery
|
1 2 3 |
$('#origin').on('click',function(){ $(this).parent('.select').addClass('active'); }); |
HTML
|
1 2 3 4 5 6 7 |
<div class="select"> <div class="select"> //←この.selectが取得される <div id="origin"> Click </div> </div> </div> |
起点となる要素の「直上の親要素」のみを取得します。2階層以上の要素は取得しません。また、直上に対象要素（ここでは.select）がない場合も取得しないです。
.parents()〜祖先要素を取得〜
※Clickを押すと、取得した要素の色が変わります。
See the Pen NxdEZq by Jomo (@commonsense-design) on CodePen.
jQuery
|
1 2 3 |
$('#origin').on('click',function(){ $(this).parents('.select').addClass('active'); }); |
HTML
|
1 2 3 4 5 6 7 |
<div class="select"> //←この.selectが取得される <div class="select"> //←この.selectが取得される <div id="origin"> Click </div> </div> </div> |
.parentsは祖先要素を取得するので、直上よりも上の階層の要素も取得できます。ここでは2階層上のdiv.selectも取得しています。
ただし、.parentsは祖先要素を全部取得していくので、条件セレクタを指定しないとかなり負荷がかかるのでご注意を…。
.closest()〜親要素で最も近い該当要素を取得〜
※Clickを押すと、取得した要素の色が変わります。
See the Pen JGwpRb by Jomo (@commonsense-design) on CodePen.
jQuery
|
1 2 3 |
$('#origin').on('click',function(){ $(this).closest('.select').addClass('active'); }); |
HTML
|
1 2 3 4 5 6 7 |
<div class="select"> <div class="select"> //←この.selectが取得される <div id="origin"> Click </div> </div> </div> |
親要素で起点から最も近い該当要素を取得するのが.closestです。.parentは直上に対象の要素が見つからない場合は要素を取得しませんが、.closestは対象の要素が見つかるまでさかのぼって要素を取得します。
対象要素が見つかってからは、それ以降の祖先要素は取得しません。一つ抜かして上の階層…なども取得できるので、なかなか便利です。
子要素系を取得する
こちらは起点となる要素の「子要素」を取得するタイプたちです。jQueryは、起点要素の#originをクリックすると、対象子要素の.selectに.activeというclassを加える処理を記述をしています。
.children()〜直下の子要素を取得〜
※Clickを押すと、取得した要素の色が変わります。
See the Pen LGMQyy by Jomo (@commonsense-design) on CodePen.
jQuery
|
1 2 3 |
$('#origin').on('click',function(){ $(this).children('.select').addClass('active'); }); |
HTML
|
1 2 3 4 5 6 7 |
<div id="origin"> Click <div class="select"> //←この要素を取得 <div class="select"> </div> </div> </div> |
起点要素の「直下の子要素」を取得します。.parentの逆バージョンです。ここでは#origin直下の.selectを選択します。
.find()〜全子孫要素を取得〜
※Clickを押すと、取得した要素の色が変わります。
See the Pen qbLxjm by Jomo (@commonsense-design) on CodePen.
jQuery
|
1 2 3 |
$('#origin').on('click',function(){ $(this).find('.select').addClass('active'); }); |
HTML
|
1 2 3 4 5 6 7 |
<div id="origin"> Click <div class="select"> //←この要素を取得 <div class="select"> //←この要素を取得 </div> </div> </div> |
該当するすべての子孫要素を取得するので、直下よりも階層が下の要素も取得できます。というわけで、2階層下のdiv.selectも取得可能です！
ちなみに祖先要素を取得する.parentsとは違って、.findはなかなか処理が高速みたいです。
兄弟要素系を取得する
階層が同じ「兄弟要素」を取得するタイプです。こちらのjQueryも、起点の#originをクリックすると、対象子要素の.selectに.activeというclassを追加するように記述してあります。.siblings()〜全兄弟要素を取得〜
※Clickを押すと、取得した要素の色が変わります。
See the Pen yOLKYb by Jomo (@commonsense-design) on CodePen.
jQuery
|
1 2 3 |
$('#origin').on('click',function(){ $(this).siblings('.select').addClass('active'); }); |
HTML
|
1 2 3 4 5 6 7 |
<ul> <li class="select"></li> //←この要素を取得 <li class="select"></li> //←この要素を取得 <li id="origin">Click</li> <li class="select"></li> //←この要素を取得 <li class="select"></li> //←この要素を取得 </ul> |
起点になる要素と同じ階層にある全ての兄弟要素を取得します。
.next()〜直後の兄弟要素を取得〜
※Clickを押すと、取得した要素の色が変わります。
See the Pen bEOLYZ by Jomo (@commonsense-design) on CodePen.
jQuery
|
1 2 3 |
$('#origin').on('click',function(){ $(this).next('.select').addClass('active'); }); |
HTML
|
1 2 3 4 5 6 7 |
<ul> <li class="select"></li> <li class="select"></li> <li id="origin">Click</li> <li class="select"></li> //←この要素を取得 <li class="select"></li> </ul> |
起点の直後にある兄弟要素を取得します。シンプルですね。
.prev()〜直前の兄弟要素を取得〜
※Clickを押すと、取得した要素の色が変わります。
See the Pen Ywdeva by Jomo (@commonsense-design) on CodePen.
jQuery
|
1 2 3 |
$('#origin').on('click',function(){ $(this).prev('.select').addClass('active'); }); |
HTML
|
1 2 3 4 5 6 7 |
<ul> <li class="select"></li> <li class="select"></li> //←この要素を取得 <li id="origin">Click</li> <li class="select"></li> <li class="select"></li> </ul> |
こちらもシンプルに起点の直前にある兄弟要素を取得します。
.nextAll()〜以降の全兄弟要素を取得〜
※Clickを押すと、取得した要素の色が変わります。
See the Pen yeGvqN by Jomo (@commonsense-design) on CodePen.
jQuery
|
1 2 3 |
$('#origin').on('click',function(){ $(this).nextAll('.select').addClass('active'); }); |
HTML
|
1 2 3 4 5 6 7 |
<ul> <li class="select"></li> <li class="select"></li> <li id="origin">Click</li> <li class="select"></li> //←この要素を取得 <li class="select"></li> //←この要素を取得 </ul> |
起点になる要素以降にある、全ての兄弟要素を取得します。
.prevAll()〜以前の全兄弟要素を取得〜
※Clickを押すと、取得した要素の色が変わります。
See the Pen eJbVjz by Jomo (@commonsense-design) on CodePen.
jQuery
|
1 2 3 |
$('#origin').on('click',function(){ $(this).prevAll('.select').addClass('active'); }); |
HTML
|
1 2 3 4 5 6 7 |
<ul> <li class="select"></li> //←この要素を取得 <li class="select"></li> //←この要素を取得 <li id="origin">Click</li> <li class="select"></li> <li class="select"></li> </ul> |
こちらは、起点になる要素以前にある全ての兄弟要素を取得します。
まとめ
まとめるとこんな感じになります。| 親要素系 | .parent() | 直上の親要素を取得 |
|---|---|---|
| .parents() | 該当する祖先要素全てを取得 | |
| .closest() | 該当する祖先要素の中で直近のものを取得 | 子要素系 | .children() | 直下の親要素を取得 |
| .find() | 該当する子孫要素全てを取得 | |
| 兄弟要素系 | .siblings() | 全兄弟要素を取得 |
| .next() | 直後の兄弟要素を取得 | |
| .prev() | 直前の兄弟要素を取得 | |
| .nextAll() | 以降の該当する兄弟要素全てを取得 | |
| .prevAll() | 以前の該当する兄弟要素全てを取得 |
取得する要素の位置を把握してメソッドチェーンなどをすれば、いろんなケースで要素を取得できる…はず…です。
基本的な部分ですが、意外とパフォーマンスや（最近はブラウザも能力向上してるのであんまりかもしれませんが）記述のスマートさに関わってきたりしますよね…。こういうところもきちんと押さえておきたいなーと思っております。
それでは！