CODEWITHSUNDEEP
jqueryjquery-selectorschildren
RGBK
RGBK

Reputation: 2048

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

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.

Upvotes: 1

Views: 221

Answers (4)

meder omuraliev
meder omuraliev

Reputation: 186752

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>

Upvotes: 2

AKX
AKX

Reputation: 169388

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')...

Upvotes: 2

Dustin Laine
Dustin Laine

Reputation: 38543

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

Upvotes: 1

Chris
Chris

Reputation: 12078

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

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

Upvotes: 0

Related Questions