ITコラム

jQuery

2018.08.14

jQuery【 children 】子要素を取得

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

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

１．children メソッド

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

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

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

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

.children( [selector] )

selector

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

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

▲目次へ戻る

２．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>

▲目次へ戻る

３．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 を指定してフィルタリングしています。

▲目次へ戻る