たとえばこんなとき
<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() はセットで覚えちゃうのがいいかも