
スキルアップ
2021.04.15
社会人におすすめなプログラミングスクールの条件とは?目的別25校と選び方
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
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.04.15
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
スキルアップ
2021.04.15
Webディレクターとは、Webサイト制作や、企画、運用の現場においてリーダーの役割を担う職種です。多くの業務をこなすため大変な仕事ではありますが、その分やりがいや魅力もある仕事です。本記事では、Webディレクターの具体的 […]
スキルアップ
2021.04.14
IT業界やエンジニアという職種に対してなんとなくイメージは持っているものの、具体的にどんな仕事をしているのか詳しく知らないという方もいらっしゃるでしょう。本記事では、IT業界とはどんな業界なのかをわかりやすく解説。各業種 […]
スキルアップ
2021.04.02
IT業界未経験からITエンジニアへ転職しようとするとき、強い味方になってくれるのが資格です。IT系の資格試験には数多くの種類があり、取得することでスキルの証明が可能。本記事では、未経験者が就職を有利にするためのおすすめ資 […]
スキルアップ
2021.04.01
「プログラミングができると就活が余裕らしいけど、大学生のうちにプログラミングを学ぶメリットって何?」と考えている方に向けて、本記事では元エンジニアである筆者がこれまでの経験則をもとに、在学中にプログラミングを学習するメリ […]
スキルアップ
2021.04.01
【2021年最新】いざJava SE 11のBronze資格にチャレンジしようと思っても「申込方法が複雑すぎて難しい…」と困っている方も多いのでは?本記事では、2020年に新しくなったOracle認定Javaプログラマ試 […]
INTERNOUS,inc. All rights reserved.