jQueryで一つ上の親を取得するには？

jQueryを使って要素を操作する際、対象要素の親要素を取得したい場合があります。例えば、クリックイベントが発生した要素の親要素の色を変えたい場合などです。この記事では、jQueryで一つ上の親要素を取得する方法について解説します。

parent()メソッド

ある要素の親要素を取得するには、parent()メソッドを使用します。このメソッドは、呼び出した要素の直接の親要素を返します。

$(セレクタ).parent();

セレクタの部分に、親要素を取得したい要素のセレクタを指定します。返り値は、親要素を表すjQueryオブジェクトです。

例えば、以下のようなHTML構造があるとします。

<div class="parent">
  <p>親要素です</p>
  <ul>
    <li class="child">子要素です</li>
  </ul>
</div>

このHTML構造において、class="child"のli要素をクリックした時に、その親要素であるul要素にactiveクラスを追加したい場合は、以下のjQueryコードを使用します。

$(document).ready(function() {
  $('.child').click(function() {
    $(this).parent().addClass('active');
  });
});

このコードでは、$(this)でクリックされたli要素自身を表し、parent()でその親要素であるul要素を取得しています。そして、addClass()でactiveクラスを追加しています。

parent()メソッドと似たメソッドにparents()メソッドがあります。parents()メソッドは、指定した要素の祖先要素を全て取得します。一方、parent()メソッドは、直接の親要素のみを取得します。

以下の表は、parent()メソッドとparents()メソッドの違いをまとめたものです。

メソッド	説明
`parent()`	直接の親要素を取得する
`parents()`	全ての祖先要素を取得する

<a href="https://api.jquery.com/parent/">jQuery.parent() | jQuery API Documentation</a>

A1: parent()メソッドは、直接の親要素のみを取得します。もし、取得したい要素が直接の親要素ではない場合は、parents()メソッドを使用するか、parent()メソッドを複数回ネストして使用してください。

A2: parent()メソッドは、jQueryオブジェクトを返すので、取得した親要素に対して、他のjQueryメソッドを適用することができます。例えば、addClass()、css()、text()などを使用することができます。

A3: はい、closest()メソッドを使用することもできます。closest()メソッドは、自身を含む祖先要素のうち、指定したセレクタに最初に一致する要素を返します。parent()メソッドよりも柔軟な要素取得が可能です。

その他の参考記事:jquery 次の要素