cannot access child element - jquery

Question

Hello.

I have a HTML like

<div class="a">
    <div class="b">
        something
    </div>

    <div class="c">
        <div class="subC">
            i want to access
        </div>
    </div>
</div>

and jquery like

$('.a').hover(function(){
    $(this).children('.subC').fadeOut();
})

I Want to access the class "subC" but above is not working.

i also tried

$('.a').hover(function(){
    $(this).children('.c .subC').fadeOut();
})

but this too is not working !

Whats the solution to this problem ! am i doing anything wrong ? please help

Answer 1

Use .find('selector') to find deep children

Answer 2

children only goes one level deep. Try find() instead.

http://api.jquery.com/children/

Answer 3

As Rob says, use .find to find deep elements.

$('.a').hover(function()
    {
        $(this).find('.c .subC').fadeOut();
    });

if you want to use .children, write

$('.a').hover(function(){
    $(this).children('.c').children('.subC').fadeOut();
})

Answer 4

When inside a jQuery closure, this refers to the jQuery object returned by the previous jQuery operation:

$('.a').hover(function() {
    // 'this' is a jQuery object containing the result of $('.a')
})

Use this within the closure to set the scope for querying inside the current jQuery object:

$('.a').hover(function() {
    $('.subC', this).fadeOut();
})