【jQuery】$(this)から親要素をたどっていき、最初に検知した要素だけ取得したいとき

たとえばこんなとき

<div class='a'> / ①
  <div class='a'> / ②
    <div class='b'> / ③
      <button id='button'>BUTTON</button>
    </div>
    <div class='c'></div>
  </div>
</div>

ボタンを押したとき、②の要素だけを取得したい

parentしまくればとってこれる

$('button#button').click (function(){
  target = $(this).parent().parent();
  console.log(target);
});

こうすれば取れる・・・けど冗長だ

parents() を使ってみる

$('button#button').click (function(){
  target = $(this).parents('.a');
  console.log(target);
});

これだと親要素にある .aのセレクタの要素が全て取得される
今回の場合、①と②のdiv要素が取得されてしまう
②だけ取得するにはどうすればいいか

こういうのがあった

$('button#button').click (function(){
  target = $(this).closest('.a');
  console.log(target);
});

これで親辿っていく上で最初にでたもの、
つまり②を取得した段階で検索を終えるので②だけを取得できた

まとめ

取得したい要素にid属性を割り振って素直に parents() してもいいときもあるけれど、
そうしずらいときは、closest() を使うのもありかなと思いました

parent() parents() closest() はセットで覚えちゃうのがいいかも