jQuery - 无法隐藏父级

发布于 2024-10-16 01:53:33 字数 561 浏览 2 评论 0原文

我似乎在一项非常简单的任务中偶然发现了一个问题。我试图在单击子级时隐藏父级 div。

这是我的 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 拒绝隐藏。有什么想法吗？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

み格子的夏天 2024-10-23 01:53:33

尝试使用 $(this).closest(".wave-wrap").hide() 代替。

回复收藏 0 原文

记忆消瘦 2024-10-23 01:53:33

你的代码运行得很好。看一下下面的例子：

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

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>

回复收藏 0 原文

~没有更多了~