portée de this dans un .load()

[SpaceFrog]

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 ?

[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.

[SpaceFrog]

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

[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.

[SpaceFrog]

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() ?

[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

[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...

[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 ?

[SpaceFrog]

oui étant habitué à cette portée du this je m'étonnais qu'elle ne s'appliquât pas au load()

[Bovino]

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

[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.

[Bovino]

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>

[SpaceFrog]

Code :

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

ou en jouant avec le class
http://jsfiddle.net/tP5pK/6/

[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.

[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.