jQueryで親要素・先祖要素を取得する方法

HTML

<div class="grand-parent">
  <ul class="parent">
    <li class="child">子どもA
      <div class="grand-child target">孫A</div>
    </li>
    <li class="child">子どもB
      <div class="grand-child">孫B</div>
    </li>
    <li class="child">子どもC</li>
  </ul>
</div>

parent() … 直近の親要素を取得

$('.target').parent(); // 直近の親要素を取得

parents() … すべての親要素を取得

$('.target').parents(); // すべての親要素を取得

下記のように、すべての親要素の中から、引数に指定したセレクタの要素を取得することも可能です。

$('.target').parents('.grand-parent');

closest() … 開始要素から最も近い親要素

$('.target').closest('.grand-parent');
  • セレクタ指定は必須。
  • 開始要素から最も近い親要素を取得する。
  • 条件にマッチすれば、開始要素そのものが返る場合もある。

参考サイト

jQuery日本語リファレンス【closest()】