More than 3 years have passed since last update.

今更だけどfind()とchildren()の違いについて

Last updated at 2020-11-17Posted at 2019-07-04

もう使われなくなってきたjQueryですが、コードを読むときにやたらjQueryが使われている＆Reactを用いた開発でもjQueryと共存ができるのでさきほど勉強をはじめました。
そこでfind()とchildren()が似てたので、使い分けについて説明していきます。

#find()とchildren()の違いとは
小要素を取得できる階層の違いです。
find()は小要素すべてを取得でき、children()は１階層下の要素のみ取得できます。

HTMLが以下のときに

<div id="セレクタ">
  <a>あいうえお</a>
  <div>
    <a>かきくけこ</a>
  </div>
</div>

##find()の場合

$('セレクタ').find('a');

で、親要素のセレクタ内にある小要素すべての<a>を取得します。
なので、あいうえおとかきくけこ両方取得できます。

##children()の場合

$('セレクタ').children('a');

で、親要素のセレクタ内にある１階層下の小要素<a>のみ取得します。
なので、あいうえおのみ取得できます。