jQueryを使用する場合の要素取得方法
- 公開日 : 2014年2月10日
- カテゴリ : Web制作
JavaScriptを書く際DOMの要素を取得する方法を毎回忘れていて、その度に検索して調べるのはさすがに面倒になってきたので、備忘録として最低限必要な分をここに書いておこうと思う。
今回はjQueryを使用した場合の取得方法です。
親や先祖を取得
- 直近の親のみ取得
-
$('自分').parent('条件');
- 直近の親だけを対象にし、その上の先祖までは遡らない。
引数に要素名を記述すれば、直近の親がその要素に適合した場合のみ取得できる。
直近の親が条件に合わなければ戻り値は空になる。 - 親を含めすべての先祖を取得
-
$('自分').parents('条件');
- 引数に要素名を記述すれば、親を含めすべての先祖からその要素に適合した要素がすべて取得できる。
- 親を含めすべての先祖から最も近いものを取得
-
$('自分').closest('条件');
- 通常は引数に要素を記述し、その要素に適合した最も近い要素を取得する。
引数を記述しないのならば前述のparent()を使っても同じかというと、それは違う。
parent()は親要素から検索するが、closestは自分自身も含めて検索を行うからだ。
子や孫を取得
- 直下の子のみ取得
-
$('自分').children('条件');
- 直下の子のみを対象にし、その下の孫以下は対象にしない。
引数に要素名を記述すれば、直下の子の中からその要素に適合した要素がすべて取得できる。 - すべての子や孫を取得
-
$('自分').find('条件');
- 引数に要素名を記述すれば、すべての子や孫の中からその要素に適合した要素がすべて取得できる。
兄弟を取得
- 隣(前)にある兄弟要素を取得
-
$('自分').prev('条件');
- 自分のすぐ前にある兄弟要素を取得。さらにその前以前の兄弟要素は対象外。
- 隣(後)にある兄弟要素を取得
-
$('自分').next('条件');
- 前項prev()の逆バージョン。
自分のすぐ後ろにある兄弟要素を取得。さらにその後ろ以降の兄弟要素は対象外。
2014年2月12日追記:jQueryを使わない場合のDOM要素取得方法も書きました。
- 参考記事:jQueryを使わない場合の要素取得方法
- https://www.firstsync.net/archives/5471