jQueryのparentメソッドとは？parentメソッドの使用方法を紹介

Javascript
jQuery
プログラミング言語

公開日時: 2021-02-03 　更新日時: 2022-06-06

この記事でわかること

システム エンジニア: parentメソッドとはどういったものでしょうか？

プロジェクト マネージャー: parentとあるように親要素を取得できるメソッドです。

jQueryでのparentメソッドの使い方とは？

今回は、jQueryでのparentメソッドの使い方について説明します。parentメソッドを使用すれば、親要素を取得できます。

基本的な使い方から、引数の使い方について紹介します。また、attrメソッドやchildrenメソッドとの組み合わせについても紹介します。

jQueryでのparentメソッドの使い方に興味のある方はぜひご覧ください。

基本的な使い方

parentメソッドを使用した、親要素の取得方法を紹介します。HTMLを以下に記載します。

<html>
  <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <div id="parent">
      <p>parent</p>
      <div id="children">
        <p>children</p>
      </div>
    </div>
  </body>
</html>

<html>

<head>

</head>

<body>

<p>parent</p>

<p>children</p>

</div>

</body>

</html>

jQueryは以下のように記述します。

$(function(){
  // idがchildrenの親要素を取得
  let result1 = $("#children").parent();
  console.log(result1);

  // idがchildrenの親要素を取得(div指定)
  let result2 = $("#children").parent("div");
  console.log(result2);
});

$(function(){

// idがchildrenの親要素を取得

let result1 = $("#children").parent();

console.log(result1);

// idがchildrenの親要素を取得(div指定)

let result2 = $("#children").parent("div");

console.log(result2);

});

実行結果は以下のようになります。

[div#parent, ...]
[div#parent, ...]

1 2	[div#parent, ...] [div#parent, ...]

このように、jQueryではparentメソッドを使用して親要素を取得できます。

attrメソッドとの組み合わせ

parentメソッドとattrメソッドを組み合わせることで、取得した親要素の属性を取得できます。HTMLを以下に記載します。

<html>
  <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <div id="parent_id" class="parent_class" name="parent_name">
      <p>parent</p>
      <div id="children">
        <p>children</p>
      </div>
    </div>
  </body>
</html>

<html>

<head>

</head>

<body>

<p>parent</p>

<p>children</p>

</div>

</body>

</html>

jQueryは以下のように記述します。

$(function(){
  // idがchildrenの親要素のid属性を取得
  let result1 = $("#children").parent().attr("id");
  console.log(result1);

  // idがchildrenの親要素のclass属性を取得
  let result2 = $("#children").parent().attr("class");
  console.log(result2);

  // idがchildrenの親要素のname属性を取得
  let result3 = $("#children").parent().attr("name");
  console.log(result3);
});

$(function(){

// idがchildrenの親要素のid属性を取得

let result1 = $("#children").parent().attr("id");

console.log(result1);

// idがchildrenの親要素のclass属性を取得

let result2 = $("#children").parent().attr("class");

console.log(result2);

// idがchildrenの親要素のname属性を取得

let result3 = $("#children").parent().attr("name");

console.log(result3);

});

実行結果は以下のようになります。

parent_id
parent_class
parent_name

parent_id

parent_class

parent_name

このように、jQueryではparentメソッドとattrメソッドを組み合わせて、親要素の属性を取得できます。

childrenメソッドとの組み合わせ

parentメソッドとchildrenメソッドを組み合わせることで、同階層（親要素の子要素）を取得できます。HTMLを以下に記載します。

<html>
  <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <div id="parent">
      <h3>title</h3>
      <p>parent</p>
      <div id="children">
        <p>children</p>
      </div>
    </div>
  </body>
</html>

<html>

<head>

</head>

<body>

<h3>title</h3>

<p>parent</p>

<p>children</p>

</div>

</body>

</html>

jQueryは以下のように記述します。

$(function(){
  // idがchildrenと同階層のp要素を取得
  $("#children").parent().children("p").css("color","red");

  // idがchildrenと同階層のh3要素を取得
  $("#children").parent().children("h3").css("color","blue");
});

$(function(){

// idがchildrenと同階層のp要素を取得

$("#children").parent().children("p").css("color","red");

// idがchildrenと同階層のh3要素を取得

$("#children").parent().children("h3").css("color","blue");

});

実行結果は以下のようになります。

title

parent

children

このように、jQueryではparentメソッドとchildrenメソッドを組み合わせて、同階層の要素を取得できます。

先祖要素の取得

jQueryを利用した先祖要素の取得方法を紹介します。以下の2つの方法で取得できます。

①parentメソッドのチェーン
②parentsメソッド

どちらの方法でも先祖の要素を取得できますが、②の方がシンプルに書けるので不具合のリスクが少ないです。HTMLを以下に記載します。

<html>
  <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <div id="parent1">
      <div id="parent2">
        <div id="parent3">
          <div id="parent4">
            <div id="parent5">
              <div id="children">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

<html>

<head>

</head>

<body>

</div>

</body>

</html>

jQueryは以下のように記述します。

$(function(){
  // 親の親の親を取得
  let result1 = $("#children").parent().parent().parent().attr("id");
  console.log(result1);

  // parentsメソッドでid指定で取得
  let result2 = $("#children").parents("#parent3").attr("id");
  console.log(result2);
});

$(function(){

// 親の親の親を取得

let result1 = $("#children").parent().parent().parent().attr("id");

console.log(result1);

// parentsメソッドでid指定で取得

let result2 = $("#children").parents("#parent3").attr("id");

console.log(result2);

});

実行結果は以下のようになります。

parent3
parent3

1 2	parent3 parent3

同じ結果が取得できていることが分かります。

システム エンジニア: 親要素とは上の階層のメソッドのことなんですね。よくわかりました。

プロジェクト マネージャー: このメソッドを理解できれば親の親要素も所得できるので大変便利です。

まとめ

いかがでしたでしょうか。

jQueryでのparentメソッドの使い方について説明しました。parentメソッドを使用すれば、親要素を取得できます。

基本的な使い方から、引数の使い方について紹介しました。また、attrメソッドやchildrenメソッドとの組み合わせについても紹介しました。

ぜひご自身でソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

jQueryのparentメソッドとは？parentメソッドの使用方法を紹介

jQueryでのparentメソッドの使い方とは？

基本的な使い方

attrメソッドとの組み合わせ

childrenメソッドとの組み合わせ

title

先祖要素の取得

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

jQueryのparentメソッドとは？parentメソッドの使用方法を紹介

jQueryでのparentメソッドの使い方とは？

基本的な使い方

attrメソッドとの組み合わせ

childrenメソッドとの組み合わせ

title

先祖要素の取得

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

jQueryのdataの使い方を解説！dataメソッドは便利な機能をマスターしよう！

jQueryを利用したsetTimeoutを紹介！setIntervalとは

jQueryのif文を基本から解説！文法をマスターしよう！

JavaScriptでのsubstringメソッドを使用した文字列の切り出し方

スムーススクロールとは？jQuery・CSS・JavaScriptそれぞれでの使用方法について詳しく解説！