parent()・parents()・closest()の違い - あらいまんと申します。

お久しぶりです！ Qiitaに書いた記事の転記ですが、載せまーす！

ある要素の上の階層にある要素を取得するメソッドの違いを説明します。

メソッドの概要

parent([selector]) : 1個上の階層の要素を取得
closest(selector) : セレクタに合致する、直近の階層の要素を取得
parents([selector])　: 上の階層の全ての要素を取得

実行してみる

ChromeDeveloperToolsなどにコピペして実際に指定してみてくださいね

<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
</head>
<body>
  <div id="parent-a">
    <h1>見出し</h1>
    <div id="parent-b">
      <div id="parent-c">
        <div id="child"></div>
      </div>
    </div>
  </div>
</body>
</html>

$('#child').parent(); 
  -> [<div id="parent-c">..</div>]

$('#child').closest('#parent-c'); 
  -> [<div id="parent-c">..</div>]

$('#child').parents(); 
  -> [<div id="parent-c">..</div>, <div id="parent-b">..</div>, <div id="parent-a">..</div>, <body>..</body>, ..]

parent()とclosest()の違い

parent() : 1個上の階層の要素しか取得できない
- 上の例だと、$('#child')からは、parent-cしか取れない
closest() : 1個上とは限らず、条件に合致する最も近い階層の要素を取得できる
- 上の例だと、$('#child').closest('parent-b')などで、親の親要素であるparent-bを取ることもできる