Selectionner un enfant en particulier (ou le 1er)

Bonjour,


Je souhaiterais sélectionner le premier fils, le 2ème et 3ème fils à partir d'un parent bien précis.


J'ai par exemple 2 onglets :
Sur chaque div, j'ai :
- 3 div pour l'image de gauche, l'image centrale et l'image de droite
- 1 div qui englobe le tout

<div id="tabProcessor" class="tab">					
		<div class="tabImgLeftUnselect"> </div> 
		<div class="tabImgCenterUnselect">Tab 1</div>
		<div class="tabImgRightUnselect"></div>
</div>
<div id="tabMemory" class="tab">					
		<div class="tabImgLeftUnselect"> </div> 
		<div class="tabImgCenterUnselect">Tab 2</div>
		<div class="tabImgRightUnselect"></div>
</div>

Lorsque je passe la souris (une div possédant la class 'tab"), je souhaiterais changer les classes de ses enfants div pour changer les images de fond. Cela aura pour effet de donner un effet visuel quand on passe sur un onglet.


J'ai essayer de selectionner le 1er div avec nth-child mais sans succès

$(".tab").mouseover(function () {
$(this).(":nth-child(1)").addClass("tabImgLeftSelect");});

j'ai essayé une alternative en filtrant les fils par le nom de la class "tabImgLeft" avec le caractère *


avec le point

$(".tab").mouseover(function () {
		$(this).children(".tabImgLeft*").addClass("tabImgLeftSelect");
	});

et sans le point

$(".tab").mouseover(function () {
		$(this).children("tabImgLeft*").addClass("tabImgLeftSelect");
	});

mais toujours sans succès.

Comment feriez vous pour sélectionner le 1er fils d'un père ayant un ID "tab" (ou mieux le père courant avec this)?
Modifié par alexx (07 Apr 2010 - 21:22)

C'est avec jquery UI ?

J'utilise Jquery UI mais pour ce besoin précis, il n'y en a pas besoin

Les selecteurs sont les bases de Jquery.
Je fais allusion à children() permettant récupérer les enfants
Documentation : http://api.jquery.com/children/

ou encore mieux de récupérer un enfant bien particulier par rapport à son père
Documentation : http://api.jquery.com/nth-child-selector/

Malheureusement, je n'arrive pas à l'appliquer dans ma situation

Si tu utilises jquery ui, le balisage est particulier: un ul pour les onglets, des div pour les contenus des onglets.
Donc, si je comprends ton besoin, il te faut récupérer le href de ton onglet (ex #tab_3), retirer le dièse, et à partir de là construire un objet qui contiendra les enfants que tu veux.
Tu itères sur cet objet pour appliquer le traitement à chaque élément.

Je créé mes propres onglets avec des images de fond avec mes propres div. Au début, j'utilisais des ul mais j'en voyais pas l'utilité.
Nop, je ne souhaite pas récupérer le href.

J'ai expliqué mon contexte (les onglets) mais tel que je l'ai codé, c'est un aspet général.

J'ai peut etre été trop dans les détails dans mon contexte et donc pas sufisamment claire dans mes explications. Je recommence donc avec un code plus dépouillé :

<div class="pere">
         <div>fils 1 </div>
         <div>fils 2 </div>
         <div>fils 3 </div>
</div>
<div class="pere">
         <div>fils A </div>
         <div>fils B </div>
         <div>fils C </div>
</div>

Comment selectioner les premiers fils (fils 1 / fils A).

J'ai donc essayer

$(".pere").(":nth-child(1)").addClass("tabImgLeftSelect");});

Ok, je n'avais pas compris cela.
Pour un seul élément:

$(".pere").children().first().addClass("tabImgLeftSelect");

Pour tous:

$(".pere:first-child").addClass("tabImgLeftSelect");

Es tu sur que tes 2 lignes de donne pas le même résultat ?

Normalement non. La méthode first() ne renvoie que le 1er résultat, :nth-child(1) (ou :first-child, c'est la même chose) renvoient tous les enfants correspondant.
Je crois par contre avoir mal construit le sélecteur.

$(".pere div:first-child").addClass('tabImgLeftSelect');