jQuery - Can't hide parent

问题

I've seemed to stumble upon a problem with a very simple task. I'm trying to hide a parent div when the child is clicked.

Here is my 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>

Here is my jQuery;

$('.wave').click(function() {
alert($(this).parent().html());                   
$(this).parent().hide('slow');
});

The alert seems to indicate I have the correct selector, yet the parent div refuses to hide. Any ideas why?

回答1:

Try $(this).closest(".wave-wrap").hide() instead.

回答2:

Your code is working very much well. Have a look at the following example:

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

来源：https://stackoverflow.com/questions/4874438/jquery-cant-hide-parent

标签

jquery

jquery-selectors