column

ITコラム

mv11478

プログラミングノウハウ

2018.08.14

jQuery【children】子要素を取得

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

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

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

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

▲目次へ戻る

4. まとめ

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

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

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

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

▲目次へ戻る

無料説明会

SHARE

最新記事

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

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ