column

ITコラム

mv11440

プログラミングノウハウ

2018.08.11

jQuery【find】子要素や孫要素を取得

jQuery の find メソッドを使用すると、ある要素から その下の階層を辿って目的の子要素や孫要素を取得することができます。
今回は、jQuery の find メソッドの使用方法について解説いたします。

また、ある要素の子要素のみを取得可能な children メソッドというものもあります。
children メソッドの使用方法についてはjQuery【 children 】子要素を取得をご参照下さい。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. find メソッド

find メソッドは、指定した要素の下にある子孫要素を取得することができるメソッドです。

find メソッドは、引数を指定して 次のように記述します。

$(セレクタ).find( selector );

$(セレクタ).find( jQuery object );

$(セレクタ).find( element );

find メソッドの引数の内容は、それぞれ以下の通りです。

.find( selector )

selector
取得する要素をセレクタで指定

.find( jQuery object )

jQuery object
取得する要素をオブジェクトで指定

.find( element )

element
取得する要素をDOM要素で指定

▲目次へ戻る

2. find メソッドの使用方法

find メソッドを使用して、子孫要素の背景色を変更します。
各ボタンをクリックしてみて下さい。

   

    • A-1
      • A-1-1
      • A-1-2
      • A-1-3
    • A-2
      • A-2-1
      • A-2-2
    • B-1
      • B-1-1
      • B-1-2
    • C-1
      • C-1-1
      • C-1-2
    • C-2
      • C-2-1
    • C-3
      • C-3-1
      • C-3-2
      • C-3-3

上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
  $("#btn_a").on("click", function() {
    $("ul.item_all").find("*").css("background-color", "#CCC");
    $("li.item_a").find("li").css("background-color", "pink");
  });
  $("#btn_b").on("click", function() {
    $("ul.item_all").find("*").css("background-color", "#CCC");
    $("li.item_b").find("li").css("background-color", "crimson");
  });
  $("#btn_c").on("click", function() {
    $("ul.item_all").find("*").css("background-color", "#CCC");
    $("li.item_c").find("li").css("background-color", "orchid");
  });
  $("#btn_d").on("click", function() {
    $("ul.item_all").find("*").css("background-color", "mediumpurple");
  });
});
</script>

<div style="background-color : #CCC; padding : 20px 20px 10px;">

<input type="button" id="btn_a" value="Aの子孫要素"> <input type="button" id="btn_b" value="Bの子孫要素"> <input type="button" id="btn_c" value="Cの子孫要素"> <input type="button" id="btn_d" value="全要素">

<ul class="item_all">
  <li class="item_a">A
    <ul>
    <li>A-1
      <ul>
      <li>A-1-1</li>
      <li>A-1-2</li>
      <li>A-1-3</li>
      </ul>
    </li>
    <li>A-2
      <ul>
      <li>A-2-1</li>
      <li>A-2-2</li>
      </ul>
    </li>
    </ul>
  </li>
  <li class="item_b">B
    <ul>
    <li>B-1
      <ul>
      <li>B-1-1</li>
      <li>B-1-2</li>
      </ul>
    </li>
    </ul>
  </li>
  <li class="item_c">C
    <ul>
    <li>C-1
      <ul>
      <li>C-1-1</li>
      <li>C-1-2</li>
      </ul>
    </li>
    <li>C-2
      <ul>
      <li>C-2-1</li>
      </ul>
    </li>
    <li>C-3
      <ul>
      <li>C-3-1</li>
      <li>C-3-2</li>
      <li>C-3-3</li>
      </ul>
    </li>
    </ul>
  </li>
</ul>

</div>

上のサンプルでは、例えば class 名が「 item_a 」の要素のセレクタを指定して find メソッドの引数に「 li 」要素を指定すると、画面上で「 A 」と表示されている要素の下位層に存在する全ての li 要素について、処理(ここでは背景色をピンクに変える)を行うことができます。

find メソッドの引数にアスタリスク( * )を指定すると、find メソッドの呼び出し元として指定されたセレクタの下位層に存在する全ての要素を処理対象として取得することができます。

▲目次へ戻る

3. まとめ

jQueryのfind メソッドについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ