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'); 
    }); 
}); 

Есть ли способ, чтобы добавить класс только в .edit ящик, который живет в том же .col как .edit-btn?

Вот JS скрипку https://jsfiddle.net/y6ukq3th/

Answer 1

Да, вы можете использовать .siblings('.edit-box') добавить класс к тому, кто имеет, что как брат кнопки щелкнутой:

$(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/