jqueryこの要素内の要素にクラスを追加します

Question

これはユーザーアカウント用です。ユーザーが編集ボタンを押すと、ボタンが存在する要素の内部に編集ボックスが表示されます。

だから私は、このマークアップを持っている

<div class="col account"> 
    <strong>Account Settings</strong> 
     <div class="col"> 
      <span>Profile Status</span> 
       <p><?= $this->escape($this->status); ?></p> 
       <button class="edit-btn"><i class="fa fa-pencil" aria-hidden="true"></i></button> 
       <div class="edit-box"> 
        edit 1 
       </div> 
      </div> 
      <div class="col"> 
       <span>Name</span> 
       <p> <?= $this->escape($this->name); ?></p> 
       <button class="edit-btn"><i class="fa fa-pencil" aria-hidden="true"></i></button> 
       <div class="edit-box"> 
        edit 2 
       </div> 
      </div> 
      <div class="col"> 
       <span>Username</span> 
       <p><?= $this->escape($this->username); ?></p> 
       <button class="edit-btn"><i class="fa fa-pencil" aria-hidden="true"></i></button> 
       <div class="edit-box"> 
        edit 3 
       </div> 
      </div> 
      <div class="col"> 
       <span>Bio</span> 
       <p><?= $this->escape($this->bio); ?></p> 
       <button class="edit-btn"><i class="fa fa-pencil" aria-hidden="true"></i></button> 
       <div class="edit-box"> 
        edit 4 
       </div> 
      </div> 
      <div class="col"> 
       <span>Email</span> 
       <p><?= $this->escape($this->email); ?></p> 
       <button class="edit-btn"><i class="fa fa-pencil" aria-hidden="true"></i></button> 
       <div class="edit-box"> 
        edit 5 
       </div> 
      </div> 
      <div class="col"> 
       <span>Password</span> 
       <p>**********</p> 
       <button class="edit-btn"><i class="fa fa-pencil" aria-hidden="true"></i></button> 
       <div class="edit-box"> 
        edit 6 
       </div> 
      </div> 
     </div> 
    </div> 

それから私はjqueryの

$(document).ready(function() 
{ 
    $('.edit-btn').click(function() 
    { 
     $('.edit-box').addClass('open'); 
    }); 
}); 

を持っているだけと同じ.COLに住んでいる.editボックスにクラスを追加する方法はあります.edit-btn？ここで

は https://jsfiddle.net/y6ukq3th/

Answer 1

はい、あなたが持っているものにクラスを追加する.siblings('.edit-box')を使用することができますjsのフィドルであるクリックされたボタンの兄弟のように：

$(document).ready(function() { 
    $('.edit-btn').click(function() { 
     $(this).siblings('.edit-box').addClass('open'); 
    }); 
}); 

Demo

Answer 2

$(document).ready(function() { 

    $('.edit-btn').click(function() { 

     // clear all first (if you want to do) 
     // $('.edit-box').removeClass('open'); 

     // select in parent of target 
     $(this).parents('.col:first').find('.edit-box').addClass('open'); 

     // [or] select between siblings of target 
     // $(this).siblings('.edit-box').addClass('open'); 

     // [or] select next node of target 
     // $(this).next().addClass('open'); 
    }); 
}); 

https://jsfiddle.net/mvrv7065/