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

colmun_main11534

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>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です