jQueryで子要素を取得する方法4選【children()とfind()は違います】

みなさんこんにちは!

今回の記事は、

悩みを抱えた人
・jQueryを使って子要素を取得する方法が知りたい
・children()とfind()の違いってなに?
・contents()ってなんのために使うの?

というお悩みを解決する記事になっています。


この記事の内容

・jQueryを使って子要素を取得する方法【4つご紹介します】
・セレクタを使って子要素を取得する方法
・children()/find()/contents()メソッドの使い方とそれぞれの違い


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

jQueryで子要素を取得する方法

jQueryで子要素を取得するには、以下の4種類の方法があります。

  • セレクタを使って取得する
  • children()メソッドを使って取得する
  • find()メソッドを使って取得する
  • contents()メソッドを使って取得する

それぞれ順を追ってご紹介していきます。

セレクタを使って子要素を取得する方法

まず最初にご紹介するのは、セレクタを使って子要素を取得する方法です。

使い方はとてもシンプルで、「$(“”)」の中に取得したいセレクタを記載するだけで大丈夫です。

実装コード

<div id="parent1">
  <div id="parent2">
    <p id="child1">子要素1</p>
    <p id="child2">子要素2</p>
    <p id="child3">子要素3</p>
    <span id="child4">子要素4</span>
  </div>
</div>

<script>
console.log($("#parent1 p"))
</script>

出力結果

=> [p#child1, p#child2, p#child3]

また、CSSと同じように使用することで、対象となる要素をさらに絞り込むことも可能です。

記載例対象要素
$(“#parent > p”)#parent直下のpタグ
$(“#parent p:first”)#parent配下の最初のpタグ
$(“#parent p:last”)#parent配下の最後のpタグ

children()メソッドを使って子要素を取得する方法

続いてご紹介するのは、children()メソッドです。

その名前からも想像できる通り、children()メソッドを使用すると、レシーバであるHTML要素の子要素を全て取得することができます。

実装コード

<div id="parent">
  <p id="child1">子要素1</p>
  <p id="child2">子要素2</p>
  <p id="child3">子要素3</p>
  <span id="child4">子要素4</span>
</div>

<script>
console.log($("#parent2").children())
</script>

出力結果

=> [p#child1, p#child2, p#child3, span#child4]

このように、取得したHTML要素の子要素が簡単に取得することができます。

また、引数にセレクタを指定することで、対象となる子要素を絞り込むこともできます。

実装コード

<div id="parent">
  <p id="child1">子要素1</p>
  <p id="child2">子要素2</p>
  <p id="child3">子要素3</p>
  <span id="child4">子要素4</span>
</div>

<script>
console.log($("#parent").children("span"))
</script>

出力結果

=> [span#child4]

children()メソッドを使用する際の注意点

こちらのchildren()メソッドですが、一つだけ注意点があります。

それは、取得できるのは子要素のみであり、孫要素(1階層よりも下の要素)は取得できない、ということです。

実装コード

<div id="parent1">
  <div id="parent2">
    <p id="child1">子要素1</p>
    <p id="child2">子要素2</p>
    <p id="child3">子要素3</p>
    <span id="child4">子要素4</span>
  </div>
</div>

<script>
console.log($("#parent1").children())
</script>

出力結果

=> [div#parent2]

一番上の階層の要素(#parent1)に対してchildren()メソッドを使用していますが、取得されているのは子要素のみ(#parent2)であり、孫要素であるpタグやspanタグは取得されていないのがお分かりいただけるかと思います。

find()メソッドを使って子要素を取得する方法

続いてご紹介するのは、find()メソッドです。

先ほどのchildren()メソッドが取得できるのは子要素のみでしたが、このfind()メソッドを使用すると孫要素まで取得することができます

実装コード

<div id="parent1">
  <div id="parent2">
    <p id="child1">子要素1</p>
    <p id="child2">子要素2</p>
    <p id="child3">子要素3</p>
    <span id="child4">子要素4</span>
  </div>
</div>

<script>
console.log($("#parent1").find())
</script>

出力結果

=> [div#parent2, p#child1, p#child2, p#child3, span#child4]

このように、children()メソッドでは取得されなかった孫要素(pタグやspanタグ)も無事取得されているのがお分かりいただけるかと思います。

また、children()メソッドと同様に、引数にセレクタを指定することで、対象となる要素を絞り込むことも可能です。

実装コード

<div id="parent1">
  <div id="parent2">
    <p id="child1">子要素1</p>
    <p id="child2">子要素2</p>
    <p id="child3">子要素3</p>
    <span id="child4">子要素4</span>
  </div>
</div>

<script>
console.log($("#parent1").find("p"))
</script>

出力結果

=> [p#child1, p#child2, p#child3]

contents()メソッドを使って子要素を取得する方法

最後にご紹介するのは、contents()メソッドです。

children()メソッドと基本的な機能は似ているのですが、その違いは、contents()メソッドを使うと指定した要素のテキストノードまで取得できる、ということです。

そのため、取得した要素のテキストを別のタグで囲む、という処理も実装可能となります。

実装コード

<div id="parent1">
  <div id="parent2">
    <p id="child1">子要素1</p>
    <p id="child2">子要素2</p>
    <p id="child3">子要素3</p>
    <span id="child4">子要素4</span>
  </div>

  <button id="btn">クリック</button>
</div>

<script>
$(function() {
  // ボタンをクリックするとpタグのテキストを全てstrongタグで囲います
  $("#btn").click(function() {
    $("#parent2").contents().each(function(index, element){
      $(element).contents().wrap("<strong>")
    })
  });
});
</script>

実行結果

<div id="parent1">
  <div id="parent2">
    <p id="child1"><strong>子要素1</strong></p>
    <p id="child2"><strong>子要素2</strong></p>
    <p id="child3"><strong>子要素3</strong></p>
    <span id="child4"><strong>子要素4</strong></span>
  </div>

  <button id="btn">クリック</button>
</div>

jQueryで子要素を取得する方法の使い分け

最後にそれぞれの方法の使い分けについてまとめておきます。

ケース方法
子要素のみ取得するセレクタ or children()メソッド
子孫要素を取得するセレクタ or find()メソッド
子要素のテキストノードを取得するcontents()メソッド

セレクタを使用すべきか否か、という判断基準は、正直なところ、「好みの問題」になってくるかと思います。

実際のところ、「セレクタを使った方がシンプルでいいじゃん」という方もいれば、「メソッドを使用しないと何をしているか分かりづらい」という方もいるというのが実情です。

処理速度にもそれほど大きな違いはないため、プロジェクトのルールとして定められていればそちらに従いましょう。

そうでなければ、場面に応じて、より分かりやすく直感的に使用できる方を採用する形で問題ありません。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまで、jQueryで子要素を取得する方法について解説してきましたがいかがでしたか?

いずれの方法も、使い方自体はとてもシンプルなので、実際の開発でもすぐに使っていただけるかと思います。

ただ、取得したい要素によって使用するメソッドは変わってきますので、その点は覚えておいてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。

あわせて読みたい

みなさんこんにちは! 今回の記事は、 悩みを抱えた人 ・jQueryを使って親要素を取得する方法が知りたい・祖先要素を取得するにはどうしたらいいの?・parent()、parents()、closest()の違いってなに? […]

jQueryで親要素を取得する方法3選【parent()・parents()・closest()の違い】