jQuery - Comment sélectionnez-vous les enfants des enfants dans le contexte de 'ceci'?

Question

En roulant sur un div wrapper, j'ai besoin de différents enfants imbriqués pour faire des choses différentes.

Une div doit passer à un niveau d'opacité, une autre div doit faire autre chose.

Tout est emballé dans beaucoup de choses que je ne peux pas altérer.

Je n'ai aucune idée de comment appeler les enfants chez les enfants .... J'ai essayé tous les frikkin combo de jQuery, mais il ne veut tout simplement pas jouer, car il se attelle sur la partie 'this' de la fonction. Mais si j'enlève le 'ceci' il fait l'action à toutes les instances dans le 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> 

J'ai cherché partout pour des questions ou des sujets liés à la recherche d'un enfant chez un enfant mais hélas, il n'y a vraiment rien autour. Je n'ai rien vu comme:

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

Ou peut-être aller dans cette voie?

this > .foo > #bar 

Parce qu'il ne marcherait jamais, « ceci » doit être sur des guillemets. Alors, quelle est la solution si nous ne pouvons pas utiliser em?

Éditer - OK c'est donc une question vraiment novice. Désolé, nous espérons aider un débutant quelque part. Merci pour votre patience.

Answer 1

Pour appeler les enfants des enfants que vous pouvez faire:

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

ou vous pouvez utiliser find qui est similaire à children sauf qu'il scans the DOM recursively.

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

Answer 2

Je crois que $ (this) .find() fonctionnera pour cela.

Pour plus d'informations sur la recherche, consultez http://api.jquery.com/find/.

Answer 3

Essayé $(".foo>#bar", this) ou $(this).children('.foo').children('#bar')?

Aussi, rappelez-vous que légalement ID doit être unique dans une page, de sorte que cet exemple pourrait être écrit juste $('#bar') ...

Answer 4

Vous devez faire .children('.vpLeft'), pas .children('vpLeft'). Vous sélectionnez un élément dont 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 }); 
}) 

Vous pouvez raccourcir ..

$("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 }); 
}) 

Il est également <img> pas <image>