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 メソッド

 
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>

▲目次へ戻る

4. まとめ

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

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

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

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

▲目次へ戻る

卒業生の声

SHARE

最新記事

無料相談する

INTERNOUS,inc. All rights reserved.