jQuery｢.children() / .find()｣で子要素を取得する方法

2020年7月7日

jQueryの「.children() / .find()」は、いずれも子要素を取得する事ができるメソッド

今回は、jQueryの「.children() / .find()」について、それぞれの使い方をサンプルを交えて解説しよう。

.children()の機能とは？

.children()の機能

.children()は、「指定要素の直下の子要素を取得する」事ができる。

.children()の構文

.children()の構文は次のような記述となる

$("セレクタ").children();

また、.children("セレクタ")のように引数にセレクタを指定すれば条件を絞り込んで取得できる。セレクタは.children("セレクタ,セレクタ")のように複数指定する事も可能で、それぞれの条件下の要素を全て取得できる。

.children()の使用例

たとえば次のようなHTMLがあったとする

HTML

<div class="wrapper">
  <p class="test">テキスト１</p>
  <div class="box">
    <p class="test">テキスト２</p>
  </div> 
</div>

jQuery

$(".wrapper").children(".test").css("color","red");

この例では、セレクタ$(".wrapper")に対して.children(".test")とする事で、その１階層下の直下の子要素であるテキスト１だけが取得され、「テキスト１」の文字が赤色に変わる事になる。

cssセレクタの「直下の子要素」セレクタとの違いは？

CSSセレクタの中にも「直下の子要素」を指定する>という指定方法がある。上記の例と同じ内容をCSSセレクタで表現したものと比較すると次のようになる。

$(".wrapper").children(".test").css("color","red");

$(".wrapper > .test").css("color","red");

実際この場合、いずれも同じ結果となる。

では.children()はどのような時に使うかというと、cssのセレクタだけでは指定できない場合に使うといいだろう。つまり、たとえば.parent()という親要素を取得するメソッドを併用して、次の例のように「兄弟要素」を取得する場合など、ひとつのセレクタでは表現できない場合に使うといいだろう。

$("セレクタ").parent().children().css("color","red");

.parent()について詳しく知りたい方はこちらの記事を参考にしてみよう！

▶ jQuery｢.parent() / .parents() / .closest()｣で親要素を取得する方法

.find()の機能とは？

同じ子要素を取得するメソッドに.find()というメソッドがある。

.find()の機能

.find()は、「指定要素以下の下層のすべての子要素（子孫要素）を取得」する事ができる。

また.find("セレクタ")のように引数にセレクタを指定する事で、取得条件を指定する事も可能。セレクタは.find("セレクタ,セレクタ")のように複数指定する事も可能で、それぞれの条件下の要素をすべて取得できる。

次のようなHTMLがあった場合

HTML

<div class="wrapper">
  <p class="test">テキスト１</p>
  <div class="box">
    <p class="test">テキスト２</p>
  </div> 
</div>

jQuery

$(".wrapper").find(".test").css("color","red");

この例では、セレクタ$(".wrapper")に対して.find(".test")とした場合、それ以下の全ての子要素が取得されテキスト１テキスト２の両方の文字が赤色に変わる。

cssセレクタの「子孫セレクタ」との違いは？

CSSセレクタでも「半角スペース」を開けてセレクタを指定して「全ての子要素」を指定する方法がある。上記の例と同じ内容をCSSセレクタで表現したものと比較すると次のようになる。

$(".wrapper").find(".test").css("color","red");

$(".wrapper .test").css("color","red");

実際この場合、いずれも同じ結果となる。

さきほどの.children()の時と同様に、cssのセレクタだけでは指定できない場合に.find()を使うといいだろう。

.each()と.find()を併用して複数の要素に適用させる応用例

.each()は繰り返し処理を行う事ができるメソッドであり、次のような書式で処理を繰り返す事ができる。

jQueryオブジェクト.each(function(index) {
  繰り返し実行する内容
});)

ちなみに.each(function(index)で引数に指定しているindexには１から始まる連番が格納される事になる。

この.each()を利用して.find()で取得した複数の子要素に順番の同じ処理を繰り返す例を見ていこう！

HTML

<div class="wrapper">
  <p>テキスト</p>
  <ul >
    <li>リストA</li>
    <li>リストB</li>
    <li>リストC</li>
  </ul> 
</div>

jQuery

$(".wrapper").find("li").each(function(index){ $(this).text("テキスト" + index); });

HTML

<div class="wrapper">
  <p>テキスト</p>
  <ul >
    <li>テキスト1</li>
    <li>テキスト2</li>
    <li>テキスト3</li>
  </ul> 
</div>

この例では$(".wrapper").find("li")で.wrapper内にある複数のliを全て取得した上で、$(this).text("テキスト" + index);でそのliのテキストを"テキスト" + indexに順番に書き換える事で、「リストA → テキスト１」などに書き換える事ができる。

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント