Как скрыть родительский элемент, нажав на дочернюю кнопку в jQuery

Question

Привет, У меня есть следующий HTML-код, и я хочу скрыть div с помощью поля editfield и editfieldlink и показать div с значением класса. Я пробовал использовать код jQuery, который не работал для меня. Но это отлично работает, если я скрываю родителя, такого как этот оператор $ (this) .closest ('div.editfield'). Parent(). Hide();

<tr class="row-fluid settingsrow"> 
       <td class="span2"> 
        <strong>Name</strong> 
       </td> 

       <td class="span8"> 
       <div class="value">ALI ASAD</div> 
       <div class="editfield"> 
        <form class="form-vertical">   
         <div class="control-group"> 
          <label class="control-label">First Name</label> 
          <div class="controls"> 
           <input type="text" name="firstname" id="firstname" placeholder="Ali"> 
          </div> 
         </div> 

         <div class="control-group"> 
          <label class="control-label">Last Name</label> 
          <div class="controls"> 
           <input type="text" name="lastname" placeholder="Asad"> 
          </div> 
         </div> 
         <div class="control-group"> 
          <div class="controls"> 
           <button type="submit" class="btn btn-primary btn-mini">Save Changes</button> 
           <button class="btn btn-inverse btn-mini cancelactionsettings">Cancel</button> 
          </div> 
         </div> 
        </form> 
       </div> 
       </td> 
       <td class="span1"><a href="#" class="editfieldlink" style="text-decoration:none"><small>Edit</small></a></td> 
      </tr> 

And My Java Script, как

$(document).ready(function(e) 
{ 
$('#settingseditor .cancelactionsettings').click(function(event) 
{ 
    event.preventDefault(); 

    $(this).closest('div.editfield').hide(); 
    $(this).closest('div.value').show(); 
    $(this).closest('a.editfieldlink').hide(); 

}); 

});

Answer 1

Вы просто не правильно обходе

$(document).ready(function (e) { 
    $('#settingseditor .cancelactionsettings').click(function (event) { 
     event.preventDefault(); 
     $(this).closest('div.editfield').hide(); 
     $(this).closest('div.editfield').prev('.value').show(); // .value is a prev sibling of div.editfield 
     $(this).closest('td').next().find('a.editfieldlink').hide();// anchor is in the next sibling td 
    }); 
}); 

fiddle

Answer 2

попробуйте родителей().

$('#settingseditor .cancelactionsettings').click(function(event) 
{ 
    event.preventDefault(); 

    $(this).parents('div.editfield').hide(); 
    $(this).parents('div.editfield').prev().show(); 
    $(this).parents('td.span8').next().find('a.editfieldlink'); 

}); 

примечание: я не нашел #settingseditor в вашем коде .... если упаковывают, вы пытаетесь использовать multiselecter то, вы забыли , оператор там ...

$('#settingseditor , .cancelactionsettings').click(... 
//---------------^^^^--- here 

Answer 3

Не знаю, где элемент с идентификатором #settingseditor жизни, но это работает для меня, если я ищу просто .cancelactionsettings элемента

$('#settingseditor, .cancelactionsettings').click(function(event) 
{ 
    ... 
} 

jsFiddle

Answer 4

Ваш селектор не соответствует ни одному элементу; изменить это $('#settingseditor .cancelactionsettings') до $('.cancelactionsettings').

Смотреть это fiddle для рабочего примера