Explication détaillée de l'utilisation de jquery.each et exemple de code

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. Par exemple :

//例遍对象，同时使用成员名称和变量内容。
$.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

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

qui est en fait dans le code source. La méthode d'instance (prototype) 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 n'est qu'un cas particulier 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 les manuels que nous utilisons souvent écrivent généralement deux paramètres. deux paramètres. Mais en fait, il y a trois paramètres qui peuvent être acceptés dans le code source, et le troisième paramètre est un tableau, qui 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

Ensuite, la distinction est basée sur le fait de savoir si pour ajouter un troisième paramètre, regardez d'abord Le cas sans ajout est que

} 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;
          }
        }
      }
    }

"distingue" les tableaux et les objets selon la variable isObj. une boucle for et pour les objets, utilisez une boucle for...in. Chaque fois que la boucle est exécutée, une fonction de rappel est exécutée et la clé du tableau ou de l'objet et la valeur de la boucle actuelle sont transmises. La méthode d'appel utilisée ici , le premier paramètre est le "this" de la fonction, c'est-à-dire que la valeur de la boucle actuelle est utilisée comme arrière-plan de this. Les deux sont la clé et la valeur ou le pointeur et la valeur, donc lorsque nous utilisons le deuxième paramètre du. fonction de rappel dans la boucle, c'est la même chose que d'utiliser ceci. Par exemple :

//刚才的例子
 $( 'p' ).each( function(i,n){
    return i+n.text;
  } )
//等价于
 $( 'p' ).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 apply est utilisée pour transmettre 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 qu'il y a dans ce tableau, la fonction de rappel peut utiliser autant de paramètres que possible. Il convient de noter ici que le troisième doit être sous la forme d'un tableau sonore original js. Il ne peut pas s'agir d'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

return object;

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!