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

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

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

目次

１．parent メソッドとparents メソッド
２．parent メソッドで親要素を取得
３．parents メソッドで全親要素を取得

１．parent メソッドとparents メソッド

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

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

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

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

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

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

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

.parent( [selector] )

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

.parents( [selector] )

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

▲目次へ戻る

　

２．parent メソッドで親要素を取得

　
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="子要素Ａの親要素">
<input type="button" id="btn_b" value="子要素Ｂの親要素">

<div>●子要素Ａの親要素の親要素
  <div>→子要素Ａの親要素
    <div id="a">→→子要素Ａ</div>
  </div>
</div>

<div>●子要素Ｂの親要素の親要素
  <div>→子要素Ｂの親要素
    <div id="b">→→子要素Ｂ</div>
  </div>
</div>

</div>

▲目次へ戻る

　

３．parents メソッドで全親要素を取得

　
今度は 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="子要素Ａの全親要素">
<input type="button" id="btn_b2" value="子要素Ｂの全親要素">
<input type="button" id="btn_r" value="リセット">

<div>●子要素Ａの親要素の親要素
  <div>→子要素Ａの親要素
    <div id="a2">→→子要素Ａ</div>
  </div>
</div>

<div>●子要素Ｂの親要素の親要素
  <div>→子要素Ｂの親要素
    <div id="b2">→→子要素Ｂ</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="子要素Ａの全親要素">　<input type="button" id="btn_b3" value="子要素Ｂの全親要素">

<div id="a3_rimit">●子要素Ａの親要素の親要素
  <div>→子要素Ａの親要素
    <div id="a3">→→子要素Ａ</div>
  </div>
</div>

<div id="b3_rimit">●子要素Ｂの親要素の親要素
  <div>→子要素Ｂの親要素
    <div id="b3">→→子要素Ｂ</div>
  </div>
</div>

</div>

▲目次へ戻る