Travail avec la méthode each dans jQuery

Lorsque nous avons un groupe d'éléments obtenus avec jQuery, nous ne pouvons y apporter des modifications que pour tous les éléments simultanément.

Par exemple, si nous voulons changer le texte de tous les paragraphes trouvés - nous ne pourrons pas le rendre différent.

Dans ce cas, la méthode spéciale each nous sera utile, qui permet d'appliquer une fonction à tous les éléments d'une collection jQuery. Ainsi, à l'intérieur de cette fonction, nous pourrons distinguer les éléments et agir différemment avec chacun d'eux.

Essentiellement, each est une boucle, à l'aide de laquelle on peut parcourir tous les éléments trouvés. La référence à l'élément actuellement parcouru par la boucle se trouvera dans this.

Nous pouvons simplement utiliser ce this en JavaScript pur, comme nous le faisions auparavant, par exemple, comme ceci - this.innerHTML - et afficher le contenu interne de nos éléments. Mais il est préférable d'encapsuler this dans le dollar jQuery de cette manière - $(this) - dans ce cas, nous pourrons lui appliquer toutes les méthodes et chaînages jQuery.

Examinons le code HTML suivant :

<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

Dans cet exemple, nous devons obtenir tous les éléments avec la classe www et afficher à l'écran leur contenu. Voici comment procéder : avec $('.www') nous obtenons les éléments dont nous avons besoin, puis avec each(test) nous appliquons la fonction test à chaque élément obtenu. Elle s'appliquera d'abord au premier paragraphe, puis au second, au troisième, et ainsi de suite.

À l'intérieur de la fonction, this pointera vers l'élément auquel la fonction test est appliquée - d'abord ce sera le premier élément, puis le second, et ainsi de suite. Avec une telle construction $(this), nous obtiendrons, au lieu d'un simple this de JavaScript, un élément jQuery et nous lui appliquerons la méthode html, qui récupérera le texte de notre élément. Ensuite, il sera simplement affiché à l'écran :

/*
	Nous écrivons le nom de la fonction test sans guillemets et sans (),
	car nous avons besoin de son code, et non du résultat :
*/

$('.www').each(test);

function test() {
	alert($(this).html());
}

Pour résoudre cette tâche, on peut aussi utiliser des fonctions anonymes - c'est ce qui est le plus souvent fait :

$('.www').each(function() {
	alert($(this).html());
});

Nous pouvons également passer à la méthode each une fonction de rappel avec des paramètres.

Dans l'exemple suivant, ajoutons à la fin de tous les li de la page leur numéro d'ordre. Maintenant, nous allons passer à notre fonction anonyme le numéro de l'élément et l'élément lui-même :

$('li').each(function (index, elem) {
	$(elem).append(index);
});

Et maintenant, utilisons this à la place de elem :

$('li').each(function (index) {
	$(this).append(index);
});

Remplacez le contenu de tous les li par leur numéro d'ordre.