portée de this dans un .load()

Version imprimable

16/11/2011, 15h15
SpaceFrog

portée de this dans un .load()

Je me posais juste une question suite à un dépannage sur le chat :

Code:

$('.foo').load('page'+$(this).attr('id')+'.php')

ne fonctionne pas ..

Suis-je vraiment obligé de décomposer en Amont pour recupérer une variable dans le load ?
16/11/2011, 15h34
eckerdecker
Je ne saurai pas mettre les mots exacts mais ça me semble impératif oui, dans la mesure ou dans le cas suivant
Code:

1 2 3 $('.bar').click(function(){ $('.foo').load('page'+$(this).attr('id')+'.php'); });
$(this) fait forcément référence au .bar cliqué.
Dans ton cas, sans contexte, this n'est rien.
Code:

1 2 3 $('.foo').each(function(){ $(this).load('page'+$(this).attr('id')+'.php'); });
Serait la bonne méthode.

le each semblerait vouloir dire qu'un eq(0) ferait le taff ... mais non
Code:

1 2 3 4 $('.foo:eq(0)').load('page'+$(this).attr('id')+'.php') //ou $('.foo').eq(0).load('page'+$(this).attr('id')+'.php')
ça m'echappe

16/11/2011, 15h44
eckerdecker

Avec eq(0) la donne est différente, tu ne cible qu'un élément aussi tu es en mesure de savoir ce que tu veux et tu pourrais donc le faire ainsi :

Code:

$('.foo:eq(0)').load('page'+$('.foo:eq(0)').attr('id')+'.php')

Mais ce n'est pas le propos d'origine ;) le problème, et je ne saurais pas comment l'expliquer, c'est que this ne vaut rien.
16/11/2011, 16h04
SpaceFrog

Citation:

et je ne saurais pas comment l'expliquer, c'est que this ne vaut rien.

C'est justement le propos de ma question ...

pourquoi le $(this) n'as pas la portée à laquelle je m'attendais dans un load() ?
16/11/2011, 16h41
Bovino

La méthode AJAX .load() n'est en fait qu'un raccourci de la méthode .ajax() avec des paramètres prédéfinis, lors de l'appel réel de la requête, la méthode (malgré sa syntaxe) ne s'applique pas à un élément jQuery, c'est une méthode globale ;)
16/11/2011, 16h45
SpaceFrog
Donc
Code:

1 2 3 me=$('.foo') me_id=me.attr('id') me.load('page'+me_id+'.php')
est incontournable ...

Merci Beef de cette explication...
16/11/2011, 16h56
eckerdecker

Mais ... le principe s'applique à d'autres méthodes non ?

Par exemple :

Code:

<img id="logo" src="logo.gif" class="fast" alt="logo"/>

et

Code:

$('#logo').fadeIn($(this).attr('class'));

ne fonctionnera pas ... non ?
De manière générale on ne peut pas utiliser $(this) pour se référer au sélecteur, me trompes-je ?
16/11/2011, 16h58
SpaceFrog

oui étant habitué à cette portée du this je m'étonnais qu'elle ne s'appliquât pas au load()
16/11/2011, 17h13
Bovino

Citation:

Envoyé par eckerdecker

Mais ... le principe s'applique à d'autres méthodes non ?

Par exemple :

Code:

<img id="logo" src="logo.gif" class="fast" alt="logo"/>

et

Code:

$('#logo').fadeIn($(this).attr('class'));

ne fonctionnera pas ... non ?
De manière générale on ne peut pas utiliser $(this) pour se référer au sélecteur, me trompes-je ?

En règle générale, dans chaque méthode appelée sur une collection jQuery, il est possible d'utiliser this pour référencer l'élément DOM en cours et $(this) pour référencer l'élément jQuery en cours.
Mais il existe certaines exceptions, dont celle soulevée par Spaffy.
Dans l'exemple que tu donnes, il s'agit d'une animation, la fonction exécutée à la fin de celle-ci est de type callback (ou fonction de rappel), lors de son exécution, la boucle qui a servi à la lancer étant terminée, il n'y a donc plus de référence à l'élément qui l'a appelée, donc this n'est plus disponible (du moins, sa valeur n'est plus celle attendue).
17/11/2011, 10h27
eckerdecker

Sauf qu'en l'occurence, bien que ça n'ait pas beaucoup de sens, je me réfère à la class de l'élément pour passer l'attribut duration (avec la valeur "fast"),
j'ai fais un petit Fiddle, pour tester, et je n'obtiens pas grand chose : http://jsfiddle.net/tP5pK/3/

Dans quel cas peut-on utiliser $(this) pour désigner le sélecteur en cours dans les paramètres mêmes d'une méthode appliquée à ce sélecteur (et pas dans un callback, là je sais qu'il n'y a pas de problème) ?

Je suis curieux de voir comment je pourrais utiliser cette "portée" je me le suis toujours interdit pensant que ça ne donnait rien, mais d'après ce que vous dites il semblerait que cela soit possible.

Un petit exemple :

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
26
27
<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
	$(function(){
		// Fonctionne : dans la fonction anonyme, $(this) est l'élément en cours
		$('#couleurs li').css('color', function(){
			return $(this).attr('class');
		});
		// Ne fonctionne pas : dans le contexte des paramètres, $(this) est l'objet global
		$('#couleurs li').css('color', $(this).attr('class'));
	});
	</script>
</head>
<body>
	<ul id="couleurs">
		<li class="yellow">Item</li>
		<li class="blue">Item</li>
		<li class="navy">Item</li>
		<li class="green">Item</li>
		<li class="red">Item</li>
		<li class="aqua">Item</li>
		<li class="gray">Item</li>
	</ul>
</body>
</html>

17/11/2011, 10h58
SpaceFrog

Code:

$('p').each(function(idx,obj){$(obj).fadeIn($(obj).attr('speed')*1)});

ou en jouant avec le class
http://jsfiddle.net/tP5pK/6/
17/11/2011, 12h49
eckerdecker

OK !

Merci à vous deux, c'est donc bien ce qu'il me semblait : $(this).qqchose() directement en paramètre d'une méthode ne se réfère pas au sélecteur sur lequel on applique ladite méthode, on est bel et bien forcé de rentrer dans une fonction anonyme (ou pas) - que ce soit un callback, un handler ou autre chose -, dans la mesure ou la signature de la méthode le permet, pour que $(this) soit contextualisé sur ce sélecteur.
17/11/2011, 13h50
Bovino

Oui et c'est logique, quand tu passes this dans les paramètres d'une méthode, tu n'es pas encore dans le parcours de la collection en référence mais juste dans l'interprétation de la méthode qui sera appelée.