jQuery Selector Problem?

Question

I am using the hover function for mouse over in a menu. I have selected a particular element using it's class. To make changes to only that element and not all the elements with that class I can use 'this'. But I wanna make changes to the h3 tag inside that class element. Again the one I have hovered on and not all elements with that class name.

I tried using the > element after 'this' but it doesn't work.

How do I do that? I hope I have explained well enough. I hope you understand using the code.

$('.slide').hover(
    function(){
        $(this>'h3').animate({
            height: '100%'
        });
    },
    function(){
        $(this>'h3').animate({
            height: '25px'
        });
    }
);

All answers appreciated. Thanks

Answer 1

You use .find() to get the <h3> element inside this.

$('.slide').hover(
    function(){
        $(this).find('h3').animate({
            height: '100%'
        });
    },
    function(){
        $(this).find('h3').animate({
            height: '25px'
        });
    }
);

If the <h3> is a direct child, it is a little more efficient to use .children():

$(this).children('h3').animate({

Answer 2

Use:

$(this).find('h3')

Or:

$(this).children('h3')

Answer 3

Try $(this).find("h3") instead of $(this>'h3').

Answer 4

Try this:

$(this).children('h3').animate();

Answer 5

You should use $(this).find('h3') as in

  $('.slide').hover(
    function(){
        $(this).find('h3').animate({
            height: '100%'
        });
    },
    function(){
        $(this).find('h3').animate({
            height: '25px'
        });
    }
);

or if you only want the h3:s directly underneath .slide you can use

$(this).children('h3')

Answer 6

All of the above answers are correct. The reason why your selector didn't work is that the plain 'this' keyword points to the actual DOM element. You have to wrap 'this' in a jQuery object by itself like so: $(this) before you can use any jQuery methods on it.