How to target a div by class name inside another class

Question

I have some divs like this.

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


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

I want to click parent class and show the child class only inside that parent without showing the other children classes in other parent classes.

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

Answer 1

Pass a selector string to find() not an object - you are passing a jQuery object. You also have invalid HTML because class"parent" should be class="parent" .

Demo

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

Answer 2

First of all you need to correct your markup as there should be = between attribute class and its value. So markup should be like :

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

Try this :

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

Demo

Answer 3

Do no use selector $('.child') in find, as it will return all the child in DOM and find , $(this).find($('.child').show(500)); should be $(this).find('.child').show(500);

Also correct the html, class"parent" should be class="parent" , same applies to class"child"

Live Demo

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

Answer 4

You need to correct the HTML as

<div class="child">

'=' is missing in your markup

The following line is enough:

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