ぺんぎんらぼ

お笑いとマンガ好きなしょぼしょぼWeb系エンジニアの日記です

*

jQueryで親要素・子要素・兄弟要素を取得する時に使うメソッド8つ

      2016/04/21

 ・子&子孫要素はfind()
 ・親先祖要素はclosest()
 ・兄弟要素はsiblings()
  が、検索対象が広いので使いやすく感じています。

(1) マッチした子要素を取得 .children()

1段階下の階層までしかDOMツリーを遡って探してくれない。
子要素しか検索対象にせず、孫要素以降はみてくれない
子要素がマッチすれば当該子要素のjQueryオブジェクトを配列(要素数1の)で返す。
なければ要素数0の配列を返却。
2つ下以降の階層も探してほしい時はfind()を使う。

# しばらくjQueryに触れていないと、.child()というメソッドも存在したような気がしてくるが、
.child()などというものはない。

(2) マッチするすべての子・孫要素を取得 .find()

2段階下以降、孫要素以降の階層もDOMツリーを遡って探してくれる。
マッチした”すべての”jQueryオブジェクトを配列で返却する。
なければ要素数0の配列を返却。

(3) マッチした親要素を取得 .parent()

1段階上の階層までしかDOMツリーを遡って探してくれない。
親要素しか検索対象にせず、先祖要素以降はみてくれない
親要素がマッチすれば当該親要素のjQueryオブジェクトを配列(要素数1の)で返すが、
なければ要素数0の配列を返却。
2つ上以降の階層も探してほしい時はparents()かclosest()を使う。

(4) マッチするすべての親・先祖要素を取得 .parents()

2段階上以降、先祖要素以降もDOMツリーを遡って探してくれる。
マッチした”すべての”jQueryオブジェクトを配列で返却する。
取得した要素のセットの順番は、直近の親から外側に向かって並べられる。

(5) マッチした初めの親・先祖要素を取得 .closest()

2段階上以降、先祖要素以降もDOMツリーを遡って探してくれる。
マッチした当該要素のjQueryオブジェクトを配列(要素数1の)で返す。
なければ要素数0の配列を返却。

(6) マッチした弟要素を取得 .next()

同じ階層レベルの直後の要素が検索対象。
マッチした当該要素のjQueryオブジェクトを配列(要素数1の)で返す。
なければ要素数0の配列を返却。
直後以降の弟も検索対象にしたい場合はsiblings()。

(7) マッチした兄要素を取得 .prev()

同じ階層レベルの直前の要素が検索対象。
マッチした当該要素のjQueryオブジェクトを配列(要素数1の)で返す。
なければ要素数0の配列を返却。
直前以降の兄も検索対象にしたい場合はsiblings()。

(8) マッチしたすべての兄弟要素を取得 .siblings()

同じ階層レベルのすべての要素が検索対象。
マッチした”すべての”jQueryオブジェクトを配列で返却する。
なければ要素数0の配列を返却。

 - JavaScript, Web , ,