Maison > interface Web > js tutoriel > Explication détaillée de la différence entre $(selector).each() et $.each() de Jquery

Explication détaillée de la différence entre $(selector).each() et $.each() de Jquery

伊谢尔伦
Libérer: 2017-06-16 16:20:45
original
1272 Les gens l'ont consulté

Nous avons tous utilisé la fonction each dans Jqurey, et nous savons tous qu'il existe deux façons d'appeler each(), l'une consiste à appeler via $.each(), l'autre consiste à appeler via $(selector). each() , alors quelle est la différence entre eux ?

Si vous regardez le code source de Jquery, vous saurez que $.each() est l'implémentation principale, $(selector).each() est le $.each() appelé, analysons d'abord $ Code source de .each() (en bas) :

La fonction each (obj, callback, args) reçoit 3 paramètres : obj - l'objet ou le tableau à parcourir, callback - la fonction de rappel à parcourir et à exécuter , args - le tableau spécifié par vous-même (ignorez-le d'abord).

L'implémentation de chaque méthode dans jQuery utilise la méthode call. La méthode call peut définir le contexte. Premièrement, dans l'exemple suivant, l'effet de chaque tableau est le même. Pourquoi ne pas l'appeler directement ?

Vous pouvez changer la direction de ceci par appel.

var testCall = function(obj, callback){
    callback.call(obj, 1);
}
Copier après la connexion

testCall(["1. Changer le pointeur de ceci", "2. La fonction peut être appelée en interne via ceci"], function(index){ //En utilisant la méthode d'appel, elle peut accessible directement via this L'objet transmis comme premier paramètre de l'appel
alert(this[index]); //2 La fonction peut être appelée via this });

N'utilisez pas la méthode d'appel. Elle n'est pas utilisée.

var test = function(obj, callback){
    callback(obj, 1);
}
Copier après la connexion

test(["1. Changer le pointeur de ceci", "2. La fonction peut être appelée via ceci à l'intérieur de la fonction"], function(index){ //Ne pas utiliser la méthode d'appel , n'utilisez pas this.
alert(this[index]); //undefined});

jQuery.each devrait être le point this modifié par appel

$.each([1,2,3], function (index, item) {    console.log({index:index,value:item,_this:this});
});/*
  Object {index: 0, value: 1, _this: Number}
  Object {index: 1, value: 2, _this: Number}
  Object {index: 2, value: 3, _this: Number}
*/
Copier après la connexion

Je n'ai pas regardé le code source de jQuery, utilisez callback.call pour le copier, la méthode d'implémentation devrait être la même.

var each = function(arr, callback){
  for( var index = 0 ; index < arr.length ; index++ ){
    callback.call(arr[index], index, arr[index]);
  }
}
each([1,2,3], function (index, item) {
    console.log({index:index,value:item,_this:this});
});/*
  Object {index: 0, value: 1, _this: Number}
  Object {index: 1, value: 2, _this: Number}
  Object {index: 2, value: 3, _this: Number}
*/
Copier après la connexion

Remarque : ceci, si l'appel n'est pas utilisé, cela ne peut pas être utilisé dans la fonction de rappel.

1. Le cas sans arguments

De manière générale, les arguments ne sont pas couramment utilisés, nous ne discuterons donc pas de la situation où if (args) est vrai, c'est-à-dire le voir directement marqué dans gris dans la partie code, c'est aussi la partie centrale de la fonction each()

if(isArray) {
      for(; i < length; i++) {
        value = callback.call(obj[i], i, obj[i]);
        if(value === false) { break; }
      }
    }
Copier après la connexion

Si l'objet que vous souhaitez parcourir est de type tableau, entrez ce bloc de code
 pour la boucle Parcourez chaque élément du tableau , puis utilisez la méthode d'appel pour exécuter obj[i].callback(i,obj[i]),
Par conséquent, lorsque vous écrivez la fonction de rappel vous-même, vous devez savoir que jquery utilisera chaque objet du tableau pour exécuter votre fonction de rappel. Les paramètres passés sont l'index de l'élément dans le tableau et l'élément en même temps, cela pointe également vers. l'élément ;
La ligne suivante consiste à déterminer si la fonction de rappel a renvoyé une valeur, si la fonction de rappel renvoie false, sortez de la boucle du tableau.

Si l'objet que vous passez peut également être traversé, le code est le même que le parcours de tableau ci-dessus

else {
      for(i in obj) {
          value = callback.call(obj[i], i, obj[i]);
          if(value === false) { break; }
        }
    }
Copier après la connexion

Si vous passez un objet, utilisez for(x in y)Parcourir les attributs de l'objet ,
Le principe est le même que ci-dessus, sauf qu'il est remplacé par l'attribut x à l'intérieur de l'objet pour exécuter la fonction de rappel, ce qui équivaut à obj.attr.callback( i,obj.attr);
Si false est renvoyé dans la fonction de rappel, l'opération de boucle se terminera également.

2. Lorsqu'il y a des arguments

Lors de l'appel de each() avec le troisième paramètre, le bloc de code suivant sera saisi pour analyse :

if(isArray) {            
   for(; i < length; i++) {
     value = callback.apply(obj[i], args);                
     if(value === false) { break; }
            }
        } else {            
        for(i in obj) {
          value = callback.apply(obj[i], args);                
          if(value === false) { break; 
          }
        }
  }
Copier après la connexion

De la même manière, il déterminera d'abord si l'objet que vous souhaitez parcourir est un tableau. S'il s'agit d'un tableau, il traversera l'élément obj[i] du tableau et exécutera obj[i].callback( args)
Attention ! Le paramètre passé ici est le tableau args que vous avez transmis. Ceci est différent du paramètre args sans. C'est-à-dire que si vous appelez la fonction each et transmettez votre propre paramètre de tableau, les paramètres de rappel de la fonction<. 🎜>La liste est le tableau args que vous transmettez. Comme ci-dessus pour tout le reste.

La fonction $(selector).each(callback,args) reçoit 2 paramètres : callback--la fonction de rappel à parcourir et à exécuter, args--le tableau spécifié par vous-même. Après avoir compris la fonction $.each(), $(selector).each est simple. Ouvrez le code source et constatez que la fonction $.each() est appelée dans $(selector).each. Le code source est le suivant :

each: function( callback, args ) {
      return jQuery.each( this, callback, args );
  },
Copier après la connexion
Vous pouvez voir que lors de l'appel de $.each(), le paramètre obj est écrit comme ceci, qui est $(selector) Il s'agit du sélecteur jquery renvoyant un jquery

objet interne<.>.  Résumé : La différence entre $.each() et $(selector).each() est que le premier peut parcourir tous les objets ou tableaux, tandis que le second est renvoyé pour les sélecteurs jquery les objets internes jquery sont parcourus, le premier est plus puissant

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal