クリックイベントにのみ適用先の上位祖先

Question

私は最近JS/jQueryを学んでいますが、その中のボタンをクリックするとトップdivに特定のスタイル/クラスを適用するのに助けが必要ですが、問題はhtmlボタンと祖先の同じクラスの異なるセクションがあります。は、トリガーボタンを含む実際のdivにのみを適用します。

HTML：

<div class="class"> 
    <div> 
     <div> 
      <button data-action="action"> 

<div class="class"> 
    <div> 
     <div> 
      <button data-action="action"> 

SCRIPT：明らかにnew-classがアクティブボタンに関係なく、すべての既存のclassクラスに適用され、このコードで

$('[data-action="action"]').click(function() { 
    $(".class").addclass("new-class") 
}) 

。

ありがとうございます！ （この場合、との最初の祖先「クラス」クラス名に）渡されたセレクタを有する第一の祖先を選択

$('[data-action="action"]').click(function() { 
    $(this).closest('.class').addclass("new-class") 
}) 

Answer 1

は、以下のコードを使用します。この場合、$（this）セレクタはクリックされた特定の要素に適用されます。

$('[data-action="action"]').click(function() { 
    $(this).closest(".class").addclass("new-class") 
}) 

Answer 2

利用「最も近い」：

Answer 3

あなたはこのようなクリックされた要素の親を見つけることができます。

$('[data-action="action"]').click(function() { 
    $this.parents(".class").addclass("new-class") 
}) 

Answer 4

あなたは

<div class="class" id = "my_id"> 
<div> 
    <div> 
     <button data-action="action"> 

<div class="class"> 
<div> 
    <div> 
     <button data-action="action"> 

SCRIPT ..としてクラスと一緒にdiv要素のIDを提供することができます。

$('[data-action="action"]').click(function() { 
$("#my_id .class").addclass("new-class") 

}）

は、それが