如何通過點擊jQuery中的子按鈕來隱藏父元素

嗨，我有以下的HTML代碼，我想用類editfield和editfieldlink鏈接隱藏div，並用class值顯示div。我嘗試了下面的jQuery代碼，它並沒有爲我工作。但是，如果我隱藏像這樣的語句$（this）.closest（'div.editfield'）。parent（）。hide（）;如何通過點擊jQuery中的子按鈕來隱藏父元素

<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>

和我的Java腳本就像

$(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(); 

});

}）;

來源

2013-03-20 ali asad

哪裏是使用id = 「settingseditor」的元素？ – 2013-03-20 13:58:52

@GeorgeBoot這顯然是一個父母，比他已經顯示的''更深的DOM – Bill 2013-03-20 14:00:06

你就是不能正確地遍歷

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

來源

2013-03-20 14:09:46

感謝兄弟。其實我也是爲父div分配事件處理程序，它被繼承到這個按鈕，所以這是行不通的。 – 2013-03-21 11:11:00

試試父母（）。

$('#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

來源

2013-03-20 13:58:57 bipen

這對我不起作用:( – 2013-03-20 14:06:30

不知道從哪裏id爲#settingseditor生活中的元素，但它爲我，如果我找的只是.cancelactionsettings元素

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

jsFiddle

來源

2013-03-20 13:59:33 Gabe

您的選擇器不匹配任何元素;將此$('#settingseditor .cancelactionsettings')更改爲$('.cancelactionsettings')。

看到這個fiddle的工作示例

來源

2013-03-20 14:00:18 Bigood

如何通過點擊jQuery中的子按鈕來隱藏父元素

回答

相關問題