2011-02-02 2 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

+4

У вас определенно есть что-то вне вопроса, вы можете видеть * только * ваш код в вопросе, который работает здесь: http://www.jsfiddle.net/nick_craver/ukRuK/ –

ответ

1

Попробуйте $(this).closest(".wave-wrap").hide() вместо этого.

+0

Привет, ребята, Спасибо за вашу помощь здесь , Как странно, если я переключу hide() на slideToggle, он будет манипулировать родителем. Интересно, почему hide() не работает над этим? В оболочке установлен экран: блок, но не следует ли это просто перезаписать hide()? – Sam

+0

Я только что узнал, что он скроется, если я не буду использовать hide ('slow') и просто используйте hide(). Я понятия не имею, почему я не могу это сделать? – Sam

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

он работает, я тестировал на [JsFiddle] (http://jsfiddle.net/We97L/) – code4j

Смежные вопросы