
スキルアップ
2021.01.25
無料で学べるプログラミングの学習サイト!おすすめ22選【2020年1月版】
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
jQuery
2018.08.14
jQuery の find メソッドを使用すると、子要素のみならず 下位層にある要素を取得することができるのに対して、children メソッドは、ある要素の子要素のみを取得することができます。
今回は、jQuery の children メソッドの使用方法について紹介します。
find メソッドの使用方法についてはjQuery【 find 】子要素や孫要素を取得をご参照下さい。
1.children メソッド
2.children メソッドで子要素を取得
3.children メソッドで特定の子要素を取得
children メソッドは、指定した要素の下にある子要素を取得することができるメソッドです。
children メソッドは 引数無しで使用する場合が多いですが、引数を指定して 条件に合う子要素を取得することもできます。
$(セレクタ).children( [selector] );
引数を指定する場合、内容は以下の通りです。
.children( [selector] )
selector 取得する要素をセレクタで指定
children メソッドを使用して、子要素の文字色を変更します。
各ボタンをクリックしてみて下さい。
子要素A-1
子要素A-2
子要素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>
今度は children メソッドに引数を指定して、特定の子要素の文字色を変更します。
各ボタンをクリックしてみて下さい。
子要素C-1
子要素C-2
子要素C-3
子要素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 を指定して フィルタリングしています。
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
スキルアップ
2021.01.21
「高卒者のお給料って高いの?低いの?」「大学を中退しても高収入は得られる?」最近は高卒採用に力を入れる企業が続々と増えていますが、こんなふうに考えて最初の一歩が踏み出せない学生さんも多いはず。そこで今回は、学歴・世代・男 […]
INTERNOUS,inc. All rights reserved.