Finding next element of a specific class inside a parent jQuery

Question

I have the following:

<div class="container">
Test 1
<div class="child">Testing</div>
</div>

<div class="container">
Test 2
<div class="child">Testing</div>
</div>

<div class="container">
Test 3
<div class="child">Testing</div>
</div>

I wish to have the child div inside the container thats hovered over to show and hide when the mouse has left the container.

I do currently have:

        $('.container').hover(
            function () {
                $(this).next('.child').show();
            },
            function () {
                $(this).next('.child').hide();
            }
        );

However it does not seem to work. Any advice appreciated, thanks.

Answer 1

next() is for siblings, you should use children for children :)...

 $('.container').hover(
        function () {
            $(this).children('.child').show();
        },
        function () {
            $(this).children('.child').hide();
        }
    );

Answer 2

use find() instead of next as it is a child element and not a sibling one:

    $('.container').hover(
        function () {
            $(this).find('.child').show();
        },
        function () {
            $(this).find('.child').hide();
        }
    );