如何在另一个类中按类名对象

Question

我有一些像这样的div。

<div class"parent">
    <div class"child">
     Some Stuff Here
    </div>
</div>


<div class"parent">
    <div class"child">
     Some other kinda Stuff Here
    </div>
</div>

我想单击父类并仅在该父级内显示子类，而不显示其他父类中的其他子类。

$(document).on('click', '.parent', function(){
    $(this).find($('.child').show(500));
});

Answer 1

将选择器字符串传递给find()而不是对象 - 您传递的是jQuery对象。 您还有无效的HTML，因为class"parent"应该是class="parent" 。

演示

$(document).on('click', '.parent', function(){
    $(this).find('.child').show(500);
});

Answer 2

首先，您需要更正标记，因为属性class及其值之间应该= 。 所以标记应该是这样的：

<div class="parent">
    <div class="child" >
     Some Stuff Here
    </div>
</div>

尝试这个 ：

$(document).on('click', '.parent', function(){
    $(this).children('.child').show(500);
});

演示

Answer 3

不要在find中使用selector $('.child') ，因为它将返回DOM中的所有子$(this).find($('.child').show(500));并查找$(this).find($('.child').show(500)); 应该是$(this).find('.child').show(500);

同样正确的html， class"parent"应该是class="parent" ，同样适用于class"child"

现场演示

$(document).on('click', '.parent', function(){
    $(this).find('.child').show(500);
});

Answer 4

您需要将HTML更正为

<div class="child">

标记中缺少'='

以下行就足够了：

$(document).on('click', '.parent', function(){
   $(this).find('.child').show(500);
});