jQueryでDOM要素をセレクタ+で指定する方法

2018年6月26日

$('.foo .bar')というように
セレクターで対象を絞り込んでいくことも出来ますが、
セレクターを指定してそこから対象を探すほうが処理が早いので
それらの代表的な方法を記載します。

セレクターの子要素を取得する.children()

jQuery

  1. selector.children()
  2. selector.children(‘.target’)

selectorから見た子要素(階層構造で直下の要素)
引数()の中を指定した場合は、
条件を満たすすべての要素を取得する

セレクターの子孫要素を取得する.find()

jQuery

  1. selector.find(‘.target’)

引数を省略すると機能しない
selectorから見た引数を満たす子孫要素をすべて取得する
(↑の場合はクラスにtargetを含む子孫要素すべて)

セレクターの親要素を取得する.parent() .parents() .parentsUntil()

jQuery

  1. selector.parent(‘.target’)
  2. selector.parents(‘.target’)
  3. selector.parentsUntil(‘.target’)

selectorから見た
.parent() = (引数を満たす)親要素
.parents() = (引数を満たす)祖先要素
.parentsUntil() = 指定した対象までの祖先要素
を、それぞれ取得する

セレクターの親要素+α .offsetParent()

jQuery

  1. selector.offsetParent()

selectorから見た祖先要素で、
CSSの「position:relative、absolute、fixed」
の設定された要素
引数は無視される

セレクターから見た直近の条件を満たす祖先要素を取得する.closest()

jQuery

  1. selector.closest(‘.target’)

selectorから見て直近の引数を満たす祖先要素

セレクターの兄弟で引数を満たす要素を取得する.siblings()

jQuery

  1. selector.siblings(‘.target’)

引数を満たす兄弟要素すべて

セレクター以降の要素を取得する.next() .nextAll() .nextUntil()

jQuery

  1. selector.next(‘.target’)
  2. selector.nextAll(‘.target’)
  3. selector.nextUntil(‘.target’)

selector以降で
.next() = 引数を満たす直後の要素
.nextAll() = 引数を満たす要素すべて
.nextUntil() = 引数までのすべての要素

セレクター以前の要素を取得する.prev() .prevAll() .prevUntil()

jQuery

  1. selector.prev(‘.target’)
  2. selector.prevAll(‘.target’)
  3. selector.prevUntil(‘.target’)

selector以前で
.prev() = 引数を満たす直前の要素
.prevAll() = 引数を満たす要素すべて
.prevUntil = 引数までのすべての要素