如何通过单击jQuery中的子按钮来隐藏父元素 [英] How to hide parent element by clicking on child button in jQuery
本文介绍了如何通过单击jQuery中的子按钮来隐藏父元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
您好我有以下HTML代码,我想隐藏div与类editfield和editfieldlink链接,并显示div与类值。我试着遵循它不适合我的jQuery代码。但是如果我像这样的语句隐藏一个父,那就行了。$(this).closest('div.editfield')。parent()。hide();
Hi I have following HTML code and I want to hide div with class editfield and editfieldlink link and show div with class value. I tried following jQuery code it did not worked for me. But this works fine if I hide a parent like this statement $(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>
我的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();
});
});
推荐答案
你刚才没有正确遍历
$(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
});
});
这篇关于如何通过单击jQuery中的子按钮来隐藏父元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文