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"><div class="vpArrow"><image src="http://site.com/image1"></div><div class="vpLeft">Title</div><div class="vpRight">
<div class="vpRightImg"><image src="http://site.com/image2"></div></div></a></li></div>

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

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");