2011-02-02 106 views
3

我似乎偶然發現了一個非常簡單的問題。我試圖隱藏一個父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拒絕隱藏。任何想法爲什麼?

+0

看起來它應該工作,對我來說:/嘗試更改hide()像slideToggle()? – sevenseacat 2011-02-02 12:29:13

+4

你肯定有問題之外的事情,你可以看到*只有*你的代碼在這裏工作的問題在這裏:http://www.jsfiddle.net/nick_craver/ukRuK/ – 2011-02-02 12:29:49

回答

1

嘗試用$(this).closest(".wave-wrap").hide()代替。

+0

嗨,大家好, 感謝您的幫助在這裏。 奇怪的是,如果我將hide()切換爲slideToggle,它會操縱父項。 我想知道爲什麼hide()不能正常工作?在包裝器上有一個display:block,但不應該被hide()覆蓋嗎? – Sam 2011-02-02 13:31:25

0

您的代碼工作得非常好。看看下面的例子:

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