jQuery【 children 】子要素を取得

jQuery の find メソッドを使用すると、子要素のみならず 下位層にある要素を取得することができるのに対して、children メソッドは、ある要素の子要素のみを取得することができます。
今回は、jQuery の children メソッドの使用方法について解説いたします。

find メソッドの使用方法についてはjQuery【 find 】子要素や孫要素を取得をご参照下さい。

1. children メソッド

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

children メソッドは 引数無しで使用する場合が多いですが、引数を指定して 条件に合う子要素を取得することもできます。

$(セレクタ).children( [selector] );

引数を指定する場合、内容は以下の通りです。

.children( [selector] )

▲目次へ戻る

2. children メソッドで子要素を取得

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

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn_a").on("click", function() {
    // 対象外の要素の CSS をリセット
    $("#b").children().css("color","black");

    // 対象となる子要素の CSS を設定
    $("#a").children().css("color","red");
  });

  $("#btn_b").on("click", function() {
    // 対象外の要素の CSS をリセット
    $("#a").children().css("color","black");

    // 対象となる子要素の CSS を設定
    $("#b").children().css("color","blue");
  });
});
//-->
</script>

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

<input type="button" id="btn_a" value="子要素Ａ">
<input type="button" id="btn_b" value="子要素Ｂ">

<div id="a">親要素Ａ
  <p>　子要素Ａ－１</p>
  <p>　子要素Ａ－２</p>
</div>

<div id="b">親要素Ｂ
  <p>　子要素Ｂ－１</p>
  <p>　子要素Ｂ－２</p>
  <p>　子要素Ｂ－３</p>
</div>

</div>

▲目次へ戻る

3. children メソッドで特定の子要素を取得

　
今度は children メソッドに引数を指定して、特定の子要素の文字色を変更します。
各ボタンをクリックしてみて下さい。

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn_c1").on("click", function() {
    // 対象外の要素の CSS をリセット
    $("#c").children().css("color","black");
    $("#d").children().css("color","black");

    // 対象となる子要素の CSS を設定
$("#c").children("#c_1").css("color","red");
  });

  $("#btn_c2").on("click", function() {
    // 対象外の要素の CSS をリセット
    $("#c").children().css("color","black");
    $("#d").children().css("color","black");

    // 対象となる子要素の CSS を設定
$("#c").children("#c_2").css("color","red");
  });

  $("#btn_c3").on("click", function() {
    // 対象外の要素の CSS をリセット
    $("#c").children().css("color","black");
    $("#d").children().css("color","black");

    // 対象となる子要素の CSS を設定
$("#c").children("#c_3").css("color","red");
  });

  $("#btn_d1").on("click", function() {
    // 対象外の要素の CSS をリセット
    $("#c").children().css("color","black");
    $("#d").children().css("color","black");

    // 対象となる子要素の CSS を設定
$("#d").children("#d_1").css("color","blue");
  });

  $("#btn_d2").on("click", function() {
    // 対象外の要素の CSS をリセット
    $("#c").children().css("color","black");
    $("#d").children().css("color","black");

    // 対象となる子要素の CSS を設定
$("#d").children("#d_2").css("color","blue");
  });

});
//-->
</script>

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

<input type="button" id="btn_c1" value="Ｃ－１">
<input type="button" id="btn_c2" value="Ｃ－２">
<input type="button" id="btn_d3" value="Ｃ－３">
<input type="button" id="btn_d1" value="Ｄ－１">
<input type="button" id="btn_d2" value="Ｄ－２">

<div id="c">親要素Ｃ
  <p id="c_1">　子要素Ｃ－１</p>
  <p id="c_2">　子要素Ｃ－２</p>
  <p id="c_3">　子要素Ｃ－３</p>
</div>

<div id="d">親要素Ｄ
  <p id="d_1">　子要素Ｄ－１</p>
  <p id="d_2">　子要素Ｄ－２</p>
</div>

</div>

children メソッドの引数に特定の子要素の id を指定して フィルタリングしています。

▲目次へ戻る

4. まとめ

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

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

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

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

▲目次へ戻る