CODEWITHSUNDEEP
jqueryjquery-selectors
geoffs3310
geoffs3310

Reputation: 14008

jquery selector needed

I have the following markup:

<div class="thumb">
   <img src="thumb.jpg"/>
   <p>Some text here</p>
</div>

Basically i need a selector so that when the thumb div id hovered over I can animate the child p.

I've tried this:

$('.thumb').hover(function() {
    $(this > "p")animate({ "top":"35px" });
}, function() {
    $(this > "p").animate({ "top":"115px" });
});

Doesn't work though for some reason.

Thanks

Upvotes: 1

Views: 113

Answers (5)

Neil
Neil

Reputation: 3231

Change to:

$('>p', this).animate({....

This construct extracts the first-level P elements in 'this', which is what you were trying to do. You don't need to use find(), or children() etc... to get the first level children that are P tags. I think that this construct is simpler and more intuitive.

P.S. you also have a '.' missing before your first 'animate';

Upvotes: 2

Matej Baćo
Matej Baćo

Reputation: 1332

Maybe:

$('.thumb').hover(function() {
    $(this).find('p').animate({ "top":"35px" });
}, function() {
    $(this).find('p').animate({ "top":"115px" });
});

Upvotes: 1

Matt Asbury
Matt Asbury

Reputation: 5662

You can use .children() to select the <p> tag - http://api.jquery.com/children/:

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

Upvotes: 1

Sjoerd
Sjoerd

Reputation: 75588

This does not work:

$(this > "p")

Try this:

$(this).find('p')

Upvotes: 0

David Tang
David Tang

Reputation: 93664

this is an object, not a string, so you can't just put it into a selector. You want to use the .find() method instead:

$(this).find("p").animate({"top": "35px"});

Which corresponds to the selector ".thumb p". To get the same behaviour as ".thumb > p", you can use .children("p") instead of .find("p"), but the difference isn't significant here.

It's also very important that you make no typos such as a missing . before animate ;)

Upvotes: 4

Related Questions