Explication détaillée de l'utilisation de jQuery.each

La méthode jQuery.each est l'une des méthodes outils de base de jQuery. Il s'agit d'une méthode d'itération générale qui peut être utilisée pour itérer des objets et des tableaux. Contrairement à la méthode $().each(), qui parcourt les objets jQuery, cette méthode peut être utilisée pour parcourir n'importe quel objet. Habituellement, deux paramètres sont requis

object : l'objet ou le tableau qui doit être parcouru.

callback : La fonction de rappel exécutée par chaque membre/élément.

La fonction de rappel a deux paramètres : le premier est le membre de l'objet ou l'index du tableau, et le second est la variable ou le contenu correspondant. Si vous devez quitter chaque boucle, vous pouvez faire en sorte que la fonction de rappel renvoie false et les autres valeurs de retour seront ignorées.

Parcourez un tableau en utilisant à la fois l'index et le contenu des éléments. Les exemples sont les suivants :

//例遍对象，同时使用成员名称和变量内容。
 
$.each( [0,1,2], function(i, n){
 alert( "Item #" + i + ": " + n );
});
//例遍对象，同时使用成员名称和变量内容。
 
$.each( { name: "John", lang: "JS" }, function(i, n){
 alert( "Name: " + i + ", Value: " + n );
});

Bien entendu, vous pouvez également utiliser directement l'instance pour appeler

$( 'div' ).each( function(i,n){
  return i+n.text;
} )

En fait, la méthode d'instance (prototype) dans le code source est également une méthode statique appelée, donc pour analyser chaque méthode, il vous suffit d'analyser sa méthode statique. L'appel d'instance est juste une méthode spéciale. cas d'utilisation de méthodes statiques.

// Execute a callback for every element in the matched set.
  // (You can seed the arguments with an array of args, but this is
  // only used internally.)
  each: function( callback, args ) {
    return jQuery.each( this, callback, args );
  },

Dans la méthode prototype, transmettez cet objet directement comme objet à parcourir. Voici le code source de la méthode statique

.

// args is for internal usage only
  each: function( object, callback, args ) {
    var name, i = 0,
      length = object.length,
      isObj = length === undefined || jQuery.isFunction( object );
    if ( args ) {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.apply( object[ name ], args ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.apply( object[ i++ ], args ) === false ) {
            break;
          }
        }
      }
 
    // A special, fast, case for the most common use of each
    } else {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
            break;
          }
        }
      }
    }
 
    return object;
  },

Il n'y a pas beaucoup de choses. Premièrement, il accepte 3 paramètres. À ce stade, nous devons faire attention au fait que dans les manuels que nous utilisons souvent, nous écrivons généralement deux paramètres. Il utilise également deux paramètres, mais en fait il y a trois paramètres qui peuvent être acceptés dans le code source. Le troisième paramètre est un tableau et sera transmis en tant que paramètre de la fonction de rappel.

Déclarez d'abord quelques variables. i, le nom et la longueur doivent préparer la boucle. isObj consiste à distinguer si le paramètre qui convient est un tableau ou un objet, en jugeant si le paramètre est une fonction ou l'attribut length n'existe pas. Le jugement est qu'il s'agit d'un objet, et les autres sont traités comme des tableaux ou des objets de type tableau.

isObj = length === undefined || jQuery.isFunction( object );
Cette phrase est écrite de manière très concise et utilise l'ordre de priorité des opérateurs pour exécuter en premier ===

En fait, c'est Le jugement n'est pas très précis, c'est juste une distinction grossière, par exemple :

var obj={length:'a'};
var isObj= obj.length=== undefined || jQuery.isFunction( obj );
alert(isObj); //false

La situation sans ajout est

} else {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
            break;
          }
        }
      }
    }

"distinguer" les tableaux et les objets selon la variable isObj, utiliser une boucle for pour les tableaux, et utiliser des objets for... en boucle, à chaque boucle, une fonction de rappel sera exécutée et le La clé du tableau ou de l'objet et la valeur de la boucle actuelle seront transmises. La méthode d'appel utilisée ici, le premier paramètre est le "this" de la fonction, ce qui signifie la valeur de la boucle actuelle. Les deux suivants sont la clé et la valeur. ou un pointeur et une valeur, donc lorsque nous utilisons le deuxième paramètre de la fonction de rappel dans la boucle, cela revient à utiliser ceci. Par exemple :

//刚才的例子
 $( 'div' ).each( function(i,n){
    return i+n.text;
  } )
//等价于
 $( 'div' ).each( function(i,n){
    return i+this.text;
  } )

Dans le cas où le troisième paramètre est ajouté, la méthode de transmission de valeur de la fonction de rappel est modifiée et la méthode d'application est utilisé. Passer les paramètres, cela pointe toujours vers la valeur actuelle, mais args, qui est le troisième tableau de paramètres, est transmis. Autant de paramètres que ce tableau a, la fonction de rappel a autant de paramètres qu'elle peut en utiliser. Notez ici que le troisième paramètre doit être js. Le format de tableau d'origine ne peut pas être un objet de type tableau ou jQuery, sinon une erreur sera signalée car la méthode apply n'est pas prise en charge. Si la fonction de rappel renvoie false, la boucle sera ignorée. Par exemple, nous ne pouvons traiter que le tableau d'indices impairs. S'il s'agit d'un élément pair, nous pouvons exécuter return false dans la fonction de rappel

Enfin, renvoyez l'objet ou le tableau d'origine, etc.

return object;

Ce qui précède est l'intégralité du contenu de cet article, j'espère que vous l'aimerez.

Pour des articles plus détaillés sur l'utilisation de jQuery.each, veuillez faire attention au site Web PHP chinois !