jQuery【 children 】子要素を取得

colmun_main11478

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

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

目次

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

1.children メソッド

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

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

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

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

.children( [selector] )

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

▲目次へ戻る

 

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

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

 

親要素A

 子要素A-1

 子要素A-2

親要素B

 子要素B-1

 子要素B-2

 子要素B-3

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

<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="子要素A">
<input type="button" id="btn_b" value="子要素B">

<div id="a">親要素A
  <p> 子要素A-1</p>
  <p> 子要素A-2</p>
</div>

<div id="b">親要素B
  <p> 子要素B-1</p>
  <p> 子要素B-2</p>
  <p> 子要素B-3</p>
</div>

</div>

▲目次へ戻る

 

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

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

    

親要素C

 子要素C-1

 子要素C-2

 子要素C-3

親要素D

 子要素D-1

 子要素D-2

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

<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="C-1">
<input type="button" id="btn_c2" value="C-2">
<input type="button" id="btn_d3" value="C-3">
<input type="button" id="btn_d1" value="D-1">
<input type="button" id="btn_d2" value="D-2">

<div id="c">親要素C
  <p id="c_1"> 子要素C-1</p>
  <p id="c_2"> 子要素C-2</p>
  <p id="c_3"> 子要素C-3</p>
</div>

<div id="d">親要素D
  <p id="d_1"> 子要素D-1</p>
  <p id="d_2"> 子要素D-2</p>
</div>

</div>

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

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です