选择一个元素的所有子元素并使用jQuery淡出它们？

Question

I am using the following HTML code: 我使用以下HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Project Quiz</title>
    <link rel="stylesheet" type="text/css" href="z/baseCss.CSS">
    <script src="/jquery-1.9.1.min.js"></script>
    <script src="/baseJS.js"></script>
</head>
<body>

<div id=header></div>
<div id=contain>
    <h1>Welcome to my web application</br>
  Please enter your name, click 'continue' and have fun</h1>
    <form>
        <input type="text" id="name" value="John Doe"/>
    </form>
    <div class="awesome">Continue</div><br/>
</div>
<div id=footer></div>

</body>
</html>

and a code of jQuery: 和jQuery的代码：

$(document).ready(function(){
    $("input")
        .focus(function(){
        $(this).css('outline-color','#559FFF');
        $(this).blur(function(){
            $(this).css("outline-color","#FF0000");
        });
    });
    $("input").click(function(){
     var value = $(this).val(function(){
         $(this).html("");
      });
    });
    $(".awesome").click(function(){
        b._slide(1000);
    });
    var b = $("div:nth-child(2)");
    alert(b);
});

My problem is that I can't figure it out how to select all children of <div id="contain"> and just make them fade out when I click my div button which is the one with the "awesome" class. 我的问题是，我无法弄清楚如何选择<div id="contain">所有子项，并且当我点击我的div按钮时，它们会逐渐消失，这就是具有“awesome”类的按钮。

This is what I have tried so far: 这是我到目前为止所尝试的：

$(".contain").each(function(){
    $(this).fadeOut(1000);
});

but it didnt work also i tried: 
$(".contain").children(function(){
    $(this).fadeOut(1000);
});

Same result here. 这里结果相同。

What am I doing wrong? 我究竟做错了什么？ I only need to fadeOut the content of <div id="contain"> and keep everything else the same as it is. 我只需要fadeOut <div id="contain">的内容，并保持其他所有内容不变。

Answer 1

You need to use: 你需要使用：

$("#contain").children().fadeOut(1000);

$(this) is your selector $(this)是你的选择器
.children() selects all the children of an element .children()选择元素的所有子元素
.fadeOut(1000) fades out the current selection .fadeOut(1000)淡出当前选择

Your attempts were wrong because: 你的尝试错了，因为：

$(".contain").each(function(){ $(this).fadeOut(1000); });

Selects all the elements with class .contain and hides them 选择具有类.contain所有元素并隐藏它们

$(".contain").children(function(){ $(this).fadeOut(1000); });

Selects the elements with class .contain , and then you're passing a function to .children() which it does not handle. 选择类为.contain的元素，然后将函数传递给它不能处理的.contain .children() 。

Note, in your case contain is an ID and not a class. 请注意，在您的情况下， contain ID而不是类。

Answer 2

beside shangeing the "." 旁边的“。” to "#" form the jquery selector, if you don't need to insert anything else or display new content into <div id="contain"> , you can just do this to“＃”形成jquery选择器，如果你不需要插入任何其他内容或将新内容显示到<div id="contain"> ，你可以这样做

$("#contain").fade(1000);

all the child will fade too 所有的孩子也会褪色

选择一个元素的所有子元素并使用jQuery淡出它们？

问题描述

2 个解决方案

解决方案1
3 已采纳 2013-04-04 22:02:07

解决方案2
1 2013-04-04 22:22:34

选择一个元素的所有子元素并使用jQuery淡出它们？

问题描述

2 个解决方案

解决方案1 3 已采纳 2013-04-04 22:02:07

解决方案2 1 2013-04-04 22:22:34

解决方案1
3 已采纳 2013-04-04 22:02:07

解决方案2
1 2013-04-04 22:22:34