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"。

<强> Demo

$(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);
});

<强> Demo

Answer 3

不要在查找中使用选择器$('.child')，因为它会返回DOM中的所有子项并查找，$(this).find($('.child').show(500));应为$(this).find('.child').show(500);

同样更正html，class"parent"应为class="parent"，同样适用于class"child"

<强> Live Demo

$(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);
});

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

4 个答案: