
スキルアップ
2021.01.25
無料で学べるプログラミングの学習サイト!おすすめ22選【2020年1月版】
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
jQuery
2018.08.20
jQuery の find メソッドや children メソッドで 子要素や孫要素など 下位層の要素を取得できるのに対して、parent メソッドと parents メソッドは、ある要素の上位層の要素を取得することができるメソッドです。
今回は、jQuery の parent メソッドとparents メソッドの使用方法について紹介します。
find メソッドと children メソッドの使用方法については、以下のページをご参照下さい。
jQuery【 find 】子要素や孫要素を取得
jQuery【 children 】子要素を取得
1.parent メソッドとparents メソッド
2.parent メソッドで親要素を取得
3.parents メソッドで全親要素を取得
parent メソッドとparents メソッドは、ある要素の上位層にある要素を取得することができるメソッドです。
parent メソッドは 指定した要素の親要素を取得することができるメソッドで、parents メソッドは 指定した要素の全祖先要素を取得することができるメソッドです。
parent メソッドが 1 段階上の階層までしか遡ることができないのに対して、parents メソッドは上位にある階層全てを遡ることができるという違いがあります。
parent メソッドとparents メソッドは、 次のように記述して使用します。
$(セレクタ).parent( [selector] );
$(セレクタ).parents( [selector] );
引数を指定する場合、内容は以下の通りです。
.parent( [selector] )
selector 取得する要素をセレクタで指定 .parents( [selector] )
selector 取得する要素をセレクタで指定
parent メソッドを使用して、親要素の文字色を変更します。
各ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<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").parent().css("color","black"); // 対象となる親要素の CSS を設定 $("#a").parent().css("color","red"); }); $("#btn_b").on("click", function() { // 対象外の要素の CSS をリセット $("#a").parent().css("color","black"); // 対象となる親要素の CSS を設定 $("#b").parent().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>●子要素Aの親要素の親要素 <div>→子要素Aの親要素 <div id="a">→→子要素A</div> </div> </div> <div>●子要素Bの親要素の親要素 <div>→子要素Bの親要素 <div id="b">→→子要素B</div> </div> </div> </div>
今度は parents メソッドを使用して、全親要素の文字色を変更します。
各ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#btn_a2").on("click", function() { // 対象外の要素の CSS をリセット $("#b2").parents().css("color","black"); // 対象となる親要素の CSS を設定 $("#a2").parents().css("color","red"); }); $("#btn_b2").on("click", function() { // 対象外の要素の CSS をリセット $("#a2").parents().css("color","black"); // 対象となる親要素の CSS を設定 $("#b2").parents().css("color","blue"); }); $("#btn_r").on("click", function() { $("#a2").parents().css("color","black"); $("#b2").parents().css("color","black"); }); }); //--> </script> <div style="background-color : #CCC; padding : 20px 20px 10px;"> <input type="button" id="btn_a2" value="子要素Aの全親要素"> <input type="button" id="btn_b2" value="子要素Bの全親要素"> <input type="button" id="btn_r" value="リセット"> <div>●子要素Aの親要素の親要素 <div>→子要素Aの親要素 <div id="a2">→→子要素A</div> </div> </div> <div>●子要素Bの親要素の親要素 <div>→子要素Bの親要素 <div id="b2">→→子要素B</div> </div> </div> </div>
上のサンプルのように parents メソッドを使用して CSS を設定すると、予想外の領域までデザインが変わってしまうことがあります。
parents メソッドを使用する場合は、引数に上限の要素を指定すると、意図しない結果を回避することができます。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#btn_a3").on("click", function() { // 対象外の要素の CSS をリセット $("#b3").parents("#b3_rimit").css("color","black"); // 対象となる親要素の CSS を設定 $("#a3").parents("#a3_rimit").css("color","red"); }); $("#btn_b3").on("click", function() { // 対象外の要素の CSS をリセット $("#a3").parents("#a3_rimit").css("color","black"); // 対象となる親要素の CSS を設定 $("#b3").parents("#b3_rimit").css("color","blue"); }); }); //--> </script> <div style="background-color : #CCC; padding : 20px 20px 10px;"> <input type="button" id="btn_a3" value="子要素Aの全親要素"> <input type="button" id="btn_b3" value="子要素Bの全親要素"> <div id="a3_rimit">●子要素Aの親要素の親要素 <div>→子要素Aの親要素 <div id="a3">→→子要素A</div> </div> </div> <div id="b3_rimit">●子要素Bの親要素の親要素 <div>→子要素Bの親要素 <div id="b3">→→子要素B</div> </div> </div> </div>
スキルアップ
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.