jQuery - How do you select children of children when in the context of 'this'?

Question

On rolling over a wrapper div, I need different nested children to do different things.

One div needs to fade to one level of opacity, another div needs to do another thing.

It's all wrapped in quite a lot of stuff that i can't tamper with.

I have NO idea how to call children in children.... I have tried every frikkin combo of jQuery but it just does not want to play, because it's getting hitched on the 'this' part of the function.

But if I take away the 'this' it does the action to all instances in the document.

<div class="vpMedia"><li><a href="http://site.com"&gt;&lt;div class="vpArrow"><image src="http://site.com/image1"&gt;&lt;/div&gt;&lt;div class="vpLeft">Title</div><div class="vpRight">
<div class="vpRightImg"><image src="http://site.com/image2"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;/div&gt;

I've searched everywhere for questions or topics related to finding a child in a child but alas, there is really nothing around. I've seen nothing like:

this.children(.foo).children(#bar)

Or maybe going this route?

this > .foo > #bar

Because it would never work, the 'this' needs to be out of quotation marks. So whats the solution if we cant use em?

Edit - OK so this is a really newbie question. Sorry, hopefully will help a beginner out there somewhere. Thanks for your patience.

Answer 1

I believe $(this).find() will work for this.

Check out http://api.jquery.com/find/ for more information on find.

Answer 2

To call children of children you can do:

$(this).children(".foo").children("#bar");

or you can use find which is similar to children except that it scans the DOM recursively.

$(this).find("#bar");

Answer 3

Tried $(".foo>#bar", this) or $(this).children('.foo').children('#bar')?

Also, remember that legally IDs should be unique within a page, so that example could be written just $('#bar')...

Answer 4

You need to do .children('.vpLeft') , not .children('vpLeft'). You are selecting an element whose nodeName === 'vpLeft'.

$("div .vpMedia").mouseover(function() {
    $(this).children("li").children("a").children(".vpLeft").animate({opacity: .3}, { duration: 100, queue: false });
}).mouseout(function() {
    $(this).children("li").children("a").children(".vpLeft").animate({opacity: 1}, { duration: 100, queue: false });
})

You can shorten it..

$("div .vpMedia").mouseover(function() {
    $('>li>a>.vpLeft', this).animate({opacity: .3}, { duration: 100, queue: false });
}).mouseout(function() {
    $('>li>a>.vpLeft', this).animate({opacity: 1}, { duration: 100, queue: false });
})

Also it's <img> not <image>