.NET開発者のためのブログメディア

SE: parentメソッドとはどういったものでしょうか？

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

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

SE: 親要素とは上の階層のメソッドのことなんですね。よくわかりました。

PM: このメソッドを理解できれば親の親要素も所得できるので大変便利です。

まとめ

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

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

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

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

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

2020年03月17日
【SQL Serverログの操作】トランザクションログの使用量を確認する方法

2020年03月16日
【.NETが統合】.NET 5の概要と今後のリリース予定

2020年03月05日

Categories 連載一覧

生活・便利

教育・学習

Windows

言語・環境

転職

エンジニア

働き方

プログラミング言語

開発環境

ツール

未分類

.NET開発者のためのブログメディア

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

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

基本的な使い方

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

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

title

先祖要素の取得

まとめ

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

【SQL Serverログの操作】トランザクションログの使用量を確認する方法

【.NETが統合】.NET 5の概要と今後のリリース予定

Categories 連載一覧

Tags タグ一覧

Jobs 新着案件

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

PMO/東京都豊島区/【WEB面談可】/在宅ワーク

システム開発/東京都新宿区/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅ワーク

システム開発/東京都新宿区/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅ワーク

システム開発/東京都港区/【WEB面談可】/在宅ワーク