jqueryで親セレクタ(親要素)を指定する時に相対パス的な書き方だと面倒

今まであまり考えてこなかった問題。

頭の中で組んで、一発でコーディング出来る時はあまり問題になってこなかったけども、動きを検証しながらHTMLを加筆したりすると起きる問題。

ある指定したボタンなど(.btn)をクリックしたら、その親要素(.parent)に.addを付ける的な。

<div class="parent">
<div class="block">
 <div class="btn">CLICK</div>
</div>
</div>

上記のようなサンプルだとしたら

$(".btn").parent().parent().addClass("add");

これでも動く。

でも、たとえば.blockの中にもう一つDIVを噛ませてしまうと、上記のコードでは.blockに対して.addがついてしまう。

なので、そういう場合は指定した要素の一番親要素という風な指定をしちゃえばOK

 

$(".btn").parents(".parent").addClass("add");もしくは
$(".btn").closest(".parent").addClass("add");

相対ルートパス的な考え方かな。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です