jQueryでDOM要素をセレクタ＋で指定する方法
$('.foo .bar')というように
セレクターで対象を絞り込んでいくことも出来ますが、
セレクターを指定してそこから対象を探すほうが処理が早いので
それらの代表的な方法を記載します。
セレクターの子要素を取得する.children()
jQuery
- selector.children()
- selector.children('.target')
selectorから見た子要素（階層構造で直下の要素）
引数（）の中を指定した場合は、
条件を満たすすべての要素を取得する
セレクターの子孫要素を取得する.find()
jQuery
- selector.find('.target')
引数を省略すると機能しない
selectorから見た引数を満たす子孫要素をすべて取得する
（↑の場合はクラスにtargetを含む子孫要素すべて）
セレクターの親要素を取得する.parent() .parents() .parentsUntil()
jQuery
- selector.parent('.target')
- selector.parents('.target')
- selector.parentsUntil('.target')
selectorから見た
.parent() = （引数を満たす）親要素
.parents() = （引数を満たす）祖先要素
.parentsUntil() = 指定した対象までの祖先要素
を、それぞれ取得する
セレクターの親要素＋α .offsetParent()
jQuery
- selector.offsetParent()
selectorから見た祖先要素で、
CSSの「position:relative、absolute、fixed」
の設定された要素
引数は無視される
セレクターから見た直近の条件を満たす祖先要素を取得する.closest()
jQuery
- selector.closest('.target')
selectorから見て直近の引数を満たす祖先要素
セレクターの兄弟で引数を満たす要素を取得する.siblings()
jQuery
- selector.siblings('.target')
引数を満たす兄弟要素すべて
セレクター以降の要素を取得する.next() .nextAll() .nextUntil()
jQuery
- selector.next('.target')
- selector.nextAll('.target')
- selector.nextUntil('.target')
selector以降で
.next() = 引数を満たす直後の要素
.nextAll() = 引数を満たす要素すべて
.nextUntil() = 引数までのすべての要素
セレクター以前の要素を取得する.prev() .prevAll() .prevUntil()
jQuery
- selector.prev('.target')
- selector.prevAll('.target')
- selector.prevUntil('.target')
selector以前で
.prev() = 引数を満たす直前の要素
.prevAll() = 引数を満たす要素すべて
.prevUntil = 引数までのすべての要素