Question

我使用以下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>

和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);
});

我的问题是，我无法弄清楚如何选择<div id="contain">的所有子项，只是当我点击我的div按钮时它们会淡出，这是一个“真棒”类。

这是我到目前为止所尝试的：

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

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

这里的结果相同。

我做错了什么？我只需要fadeOut <div id="contain">的内容，并保持其他所有内容不变。

Answer 1

您需要使用：

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

$(this)是您的选择者
.children()选择元素的所有子元素
.fadeOut(1000)淡出当前选择

你的尝试错了，因为：

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

选择类.contain的所有元素并隐藏它们

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

选择类.contain的元素，然后将函数传递给它不能处理的.children()。

注意，在您的情况下，contain是一个ID，而不是一个类。

Answer 2

除了shangeing“。” to“＃”形成jquery选择器，如果你不需要插入任何其他东西或在<div id="contain">中显示新内容，你可以这样做

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

所有孩子都会褪色

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

2 个答案: