ITコラム

jquery parent parents

jQuery

2018.08.20

jQuery【 parent 】親要素を取得する parent と parents

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

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

目次

1.parent メソッドとparents メソッド
2.parent メソッドで親要素を取得
3.parents メソッドで全親要素を取得

1.parent メソッドとparents メソッド

 
parent メソッドとparents メソッドは、ある要素の上位層にある要素を取得することができるメソッドです。

parent メソッドは 指定した要素の親要素を取得することができるメソッドで、parents メソッドは 指定した要素の全祖先要素を取得することができるメソッドです。

parent メソッドが 1 段階上の階層までしか遡ることができないのに対して、parents メソッドは上位にある階層全てを遡ることができるという違いがあります。

parent メソッドとparents メソッドは、 次のように記述して使用します。

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

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

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

.parent( [selector] )

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

.parents( [selector] )

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

▲目次へ戻る

 

2.parent メソッドで親要素を取得

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

 

●子要素Aの親要素の親要素

→子要素Aの親要素

→→子要素A

●子要素Bの親要素の親要素

→子要素Bの親要素

→→子要素B

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

<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>

▲目次へ戻る

 

3.parents メソッドで全親要素を取得

 
今度は parents メソッドを使用して、全親要素の文字色を変更します。
各ボタンをクリックしてみて下さい。



●子要素Aの親要素の親要素

→子要素Aの親要素

→→子要素A

●子要素Bの親要素の親要素

→子要素Bの親要素

→→子要素B

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

<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 メソッドを使用する場合は、引数に上限の要素を指定すると、意図しない結果を回避することができます。

 

●子要素Aの親要素の親要素

→子要素Aの親要素

→→子要素A

●子要素Bの親要素の親要素

→子要素Bの親要素

→→子要素B

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

<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>

▲目次へ戻る

SHARE

最新記事

DSC_0657

卒業生インタビュー

2019.07.11

【卒業生の声:ヒロタさん】事務職からプログラマーに転身!仕事と夜間スクールを両立し、WEB系自社開発会社へ内定。

受講スクール 夜間プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 EMTG株式会社 夜間プログラマカレッジ卒業生のヒロタさんにお話しをお伺いしました! 目次 新卒で入社した会社で事務を7年 専門性があって、も […]

続きを見る

img_top_001

卒業生インタビュー

2019.07.02

【卒業生の声:直江さん】1年間のプログラミング独学後、沖縄から上京し、更にプログラマカレッジで学習。希望していた会社に内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社アイティートゥモロー プログラマカレッジ卒業生の直江さんにお話しをお伺いしました! 目次 手を動かす仕事に就くという強い決意を持ち、会社を […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.