Introduction aux fonctions jQuery map() et each() et analyse des similitudes et des différences_jquery

Syntaxe de la méthode : map()

carte(rappel)
La fonction de rappel est appelée pour chaque élément de l'ensemble encapsulé et la valeur de retour est collectée dans une instance de l'objet jQuery.
Paramètres
callback (Fonction) Une fonction de rappel qui est appelée pour chaque élément de l'ensemble encapsulé.
Par exemple, le code suivant collecte les valeurs id de tous les éléments div de la page dans un tableau javascript :

Copier le code Le code est le suivant :

var identifiants = $("div").map(function(){
Retour (this.id==undefined) ? null :this.id;
}).get();

Regardez l'ensemble des cases à cocher contenues dans le formulaire ci-dessous :

Copier le code Le code est le suivant :

2

4

6

8

Nous pouvons obtenir un ID de case à cocher séparé par des virgules :

Copier le code Le code est le suivant :

$(':checkbox').map(function() {
renvoie this.id;
}).get().join();

Le résultat de cet appel est la chaîne "deux, quatre, six".

Dans la fonction de rappel, cela pointe vers l'élément DOM actuel à chaque itération.

Syntaxe de la méthode : each()

chacun(itérateur)
Parcourez tous les éléments de l'ensemble correspondant et appelez la fonction d'itération passée
pour chaque élément fonction de rappel itérateur (fonction) appelée
pour chaque élément de l'ensemble correspondant La méthode each() peut également être utilisée pour parcourir des objets de tableau JavaScript ou même des objets uniques, par exemple :

Copier le code Le code est le suivant :

$([a,b,c,d]).each(function(){
alerte(ce);
})

Cette instruction appellera la fonction d'itération pour chaque élément du tableau passé dans $(), et ceci dans la fonction pointe vers l'élément individuel du tableau.

Chaque fois que la fonction de rappel est exécutée, le nombre de boucles actuel sera passé en paramètre (le comptage commence à 0). Plus important encore, la fonction de rappel est déclenchée dans le contexte de l'élément DOM actuel. Par conséquent, le mot-clé this pointe toujours vers cet élément.

Supposons que nous ayons une simple liste non ordonnée comme celle-ci sur la page.

Copier le code Le code est le suivant :

• foo


• bar

Vous pouvez sélectionner et parcourir ces listes :

Copier le code Le code est le suivant :

$( "li" ).each(function( index ) {
console.log( index ": "" $(this).text() );
});

Chaque élément de la liste sera affiché dans le message suivant :

0 : foo
1 : barre
La différence entre les deux

La méthode map() est principalement utilisée pour parcourir des tableaux et des objets opérationnels, et each() est principalement utilisée pour parcourir des objets jquery.

each() renvoie le tableau d'origine et ne crée pas de nouveau tableau.
La méthode map() renvoie un nouveau tableau. Si la carte est utilisée inutilement, la mémoire peut être gaspillée.