Modifier un enfant depuis un sélecteur sur un parent

Version imprimable

Bonjour,

Je n'ai malheureusement rien trouvé à mon goût sur les forums (j'ai sûrement mal cherché...) mais en même temps, je ne sais de quel côté me lancer dans mes recherches. Je ne connais pas assez bien ce domaine puisque je m'y suis mis depuis trois jours. Je vous demanderais donc d'être tolérant avec moi, svp !

Voilà mon problème, je vous donne directement mon code HTML qui sera sans doute plus facile a comprendre qu'un long discours :

Code:

1
2
3
4
5
6
<form id="RegisterForm">
                <p>Nom d'utilisateur :<input type="text" size="15" class="TextField" name="RegUsername" id="Regusername" /></p> <hr/>
                <p>Mot de passe :<input type="password" size="15" class="TextField" name="RegPassword" id="Regpassword" /></p> <hr/>
                <p id="verification">Vérification :<input type="password" size="15" class="TextField" name="RegPasswordV" id="Regpassword" /></p> <br />
                <input id="ValidateBt" type="button" accesskey="2" name="register" value="Register" />
                </form>

Et mon code JQuery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
$("input[name='RegUsername']").live ("keyup", function ()
	{
		var $Parent = $(this).parent();
		if (!$(this).val().length)
		{
			if ($Parent.html().indexOf ("img") != -1)
		//	{	$($Parent+ " img").attr("src", "./images/RedLight.png");	}
			{	$($Parent+ " img").src = "./images/RedLight.png";	}
			else
			{	$Parent.append ("<img src=\"./images/YellowLight.png\" width=20px height=20px />");	}
		}
		else
		{
			if ($(this).val().length < 8)	//	Usename can't be little than 8 char.
			{
				if ($Parent.html().indexOf("img") == -1)
				{	$Parent.append (Picture);	} //"<img src=\"./images/YellowLight.png\" width=20px height=20px/>"
				else
				{	$($Parent+" last-child").attr ("img", "./images/YellowLight.png");	}//$(Parent+" > img").attr ("src", "./images/YellowLight.png"));	}
			}
			else	//	More than or equals to 8 char
			{	$($Parent+" img").attr ("src", "./images/GreenLight.png");	}
		}*/
	});

Tout d'abord, la ligne qui me pose le plus de problème est celle-ci :

Code:

$($Parent+ " img")

En effet, ce que j'essaye de faire c'est de sélectionner le fils "<img .../>" créé précédemment (et dynamiquement avec JQuery) et d'en modifier l'attribut "src" afin de changer d'image.

Quelqu'un pourrait-il m'aider ?

Merci pour vos réponses !

03/10/2010, 17h37
Bovino

Code:

var $Parent = $(this).parent();

te renvoie un élément jQuery, tu ne peux donc pas l'utiliser pour cibler un autre élément via $() qui attend une chaine en paramètre.

Code:

var $Parent = $(this).parent().children('img').eq(0);

voire si c'est possible :

Code:

var $Parent = $(this).prev('img');

Merci infiniement Bovino,

Ton code m'a beaucoup apporté !!!

Voilà le résultat final fonctionnel que j'utilise :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
$("input[name='RegUsername']").live ("keyup", function ()
	{
		var $Parent = $(this).parent();
		if (!$(this).val().length)
		{
			if ($Parent.html().indexOf ("img") != -1)
			{	$Parent.children('img').attr ("src", "./images/RedLight.png");	}
			else
			{	$Parent.append ("<img src=\"./images/RedLight.png\" width=20px height=20px />");	}
		}
		else
		{
			if ($(this).val().length < 8)	//	Usename can't be little than 8 char.
			{
				if ($Parent.html().indexOf("img") == -1)
				{	$Parent.append ("<img src=\"./images/YellowLight.png\" width=20px height=20px/>");	}
				else
				{	$Parent.children ("img").attr ("src", "./images/YellowLight.png");	}
			}
			else	//	More than or equals to 8 char
			{	$Parent.children ("img").attr ("src", "./images/GreenLight.png");	}
		}
	});