Comprendre le comportement du mot clé this dans un plugin

**Sten** · 10/04/2011, 12h41

Bonjour a tous,

Pour pouvoir commencer a ecrire mes propres jQuery plugins, j'ai decide de lire le ch.11 du livre 'Learning Jquery 1.3' (p.346).

Mais je ne semble pas pouvoir comprendre exactement comment le keyword this marche avec jQuery.fn dans l'exemple suivant:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<style>
.this{color:red}
.that{color:blue;}
.target{font-weight:bold}
 
</style>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div id="test">blabli</div>
<ul>
<li class="that">Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisicing elit</li>
<li>Sed do eiusmod tempor incididunt ut labore</li>
<li>Magna aliqua</li>
<li class="that">Ut enim ad minim veniam</li>
<li>Quis nostrud exercitation ullamco</li>
<li>Laboris nisi ut aliquip ex ea commodo</li>
<li class="that">Duis aute irure dolor</li>
</ul>
<input type="button" value="Swap classes" id="swap" />

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
    $('#swap').click(function() { 
        $('li').swapClass('this', 'that');
        return false;
    });
});
 
jQuery.fn.swapClass = function(class1, class2) {
	if (this.hasClass(class1)) {
		this.removeClass(class1).addClass(class2);
	}
	else if (this.hasClass(class2)) {
		this.removeClass(class2).addClass(class1);
	}
};

Je ne comprends par exemple pas pourquoi si un des 'li' a une classe 'class1' alors tous les elements de la liste recoivent une class2 apres le click, si il n'y a aucun element avec la class1, mais des elements avec la classe2, alors tous les 'li' recoivent une class1 (apres la click)...Bref je ne comprends pas comment le keyword this marche dans cet exemple.

Toutes suggestions/aides/explications bienvenues.
Merci.

**danielhagnoul** · 10/04/2011, 21h04

Bonjour

Voici un exemple, avec notes et conseils dans les commentaires du code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur { width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* TEST */
 
		/* Conseil : n'utilisez jamais des mots clés ou utilisés couramment en JavaScript comme non de classe */
 
		.ceci {color:red}
		.cela {color:blue;}
		.cible {font-weight:bold}
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<div id="test">blabli</div>
 
		<ul>
			<li class="ceci">Lorem ipsum dolor sit amet</li>
			<li>Consectetur adipisicing elit</li>
			<li>Sed do eiusmod tempor incididunt ut labore</li>
			<li>Magna aliqua</li>
			<li class="cela">Ut enim ad minim veniam</li>
			<li>Quis nostrud exercitation ullamco</li>
			<li>Laboris nisi ut aliquip ex ea commodo</li>
			<li class="cela">Duis aute irure dolor</li>
		</ul>
 
		<!-- Conseil : placer dans l'ordre après le tag : l'id éventuel, la classe éventuelle, et le reste -->
		<input id="swap" type="button" value="Swap classes" />
 
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script>
		$(function(){
			jQuery.fn.swapClass = function(class1, class2){
				/*
				 * Ici (jQuery.fn) this est un tableau (array) d'objet jQuery.
				 * On doit toujours retourner l'objet jQuery.
				 * i : le numéro de l'élément de 0 à n.
				 * item : l'élément du DOM.
				 * $(item) : l'objet jQuery qui encapsule l'item.
				 */
				return this.each(function(i, item){
					if ($(item).hasClass(class1)) {
						$(item).removeClass(class1).addClass(class2);
					} else if ($(item).hasClass(class2)) {
						$(item).removeClass(class2).addClass(class1);
					}
				});
			};
 
			$('#swap').click(function() { 
				$('li').swapClass('ceci', 'cela');
 
				return false;
			});
		});
	</script>
</body>  
</html>

**Sten** · 11/04/2011, 11h02

Merci beaucoup pour votre reponse Daniel.
Je comprends maintenant ce qu'il se passait dans mon script Jquery: dans la premiere boucle, il regarde simplement si un des objects slectionnes (tous les 'li' des la liste) a une class1 (hasClass() s'applique a tous), et dans ce cas il applique la classe 2 pour tous (this represente tous les 'li' de la liste 'd'un coup') et n'entre dans le else de la boucle seulement si aucun des 'li' a une class1.
Merci bien.

Comprendre le comportement du mot clé this dans un plugin

jQuery

Discussions similaires

Partager

Partager