jQuery - 无法隐藏父项
问题描述:
我似乎偶然发现了一个非常简单的问题。我试图隐藏一个父div当孩子被点击。jQuery - 无法隐藏父项
这是我的HTML;
<div class="wave-wrap"><div class="wave">click me</div></div>
<div class="wave-wrap"><div class="wave">click me</div></div>
<div class="wave-wrap"><div class="wave">click me</div></div>
这是我的jQuery;
$('.wave').click(function() {
alert($(this).parent().html());
$(this).parent().hide('slow');
});
警报似乎表明我有正确的选择器,但父div拒绝隐藏。任何想法为什么?
答
尝试用$(this).closest(".wave-wrap").hide()
代替。
+0
嗨,大家好, 感谢您的帮助在这里。 奇怪的是,如果我将hide()切换为slideToggle,它会操纵父项。 我想知道为什么hide()不能正常工作?在包装器上有一个display:block,但不应该被hide()覆盖吗? – Sam 2011-02-02 13:31:25
答
您的代码工作得非常好。看看下面的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('.wave').click(function() {
alert($(this).parent().html());
$(this).parent().hide('slow');
});
});
</script>
</head>
<body>
<div class="wave-wrap"><div class="wave">click me</div></div>
<div class="wave-wrap"><div class="wave">click me</div></div>
<div class="wave-wrap"><div class="wave">click me</div></div>
</body>
</html>
看起来它应该工作,对我来说:/尝试更改hide()像slideToggle()? – sevenseacat 2011-02-02 12:29:13
你肯定有问题之外的事情,你可以看到*只有*你的代码在这里工作的问题在这里:http://www.jsfiddle.net/nick_craver/ukRuK/ – 2011-02-02 12:29:49