Explication détaillée de jQuery.each utilisation_jquery

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. Nécessite généralement deux paramètres

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 sûr, vous pouvez également utiliser l'appel d'instance directement

  $( '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 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. Tout d'abord, il accepte 3 paramètres. Pour le moment, il faut faire attention au fait que les manuels que nous utilisons souvent écrivent généralement deux paramètres, mais en fait, dans le code source, il y a 3 paramètres qui peuvent être acceptés, 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. Il peut être jugé s'il s'agit d'un objet en jugeant s'il s'agit d'un objet. le paramètre est une fonction ou l'attribut length n'existe pas, le reste est géré sous forme de tableaux ou de type tableau.

isObj = longueur === non défini || jQuery.isFunction( objet);
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, ce genre de jugement n'est pas très précis, c'est juste une distinction grossière, comme :

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

Ensuite, la distinction est basée sur l'ajout ou non du troisième paramètre. Regardons d'abord la situation sans l'ajouter, qui 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 en fonction de la variable isObj. Utilisez une boucle for pour les tableaux et une boucle for...in pour les objets. Chaque fois que la boucle est exécutée, une fonction de rappel sera exécutée et le tableau de boucle actuel. ou la clé et la valeur de l'objet seront exécutées. Transmettez, 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 ceci, les deux suivants sont la clé et valeur ou pointeur et valeur, nous utilisons donc la fonction de rappel dans la boucle. Le deuxième paramètre 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 transfert de valeur de la fonction de rappel est modifiée. La méthode apply est utilisée pour transférer les paramètres. Elle pointe toujours vers la valeur actuelle, mais args est le troisième paramètre. est transmis et la fonction de rappel peut utiliser autant de paramètres que le tableau. Ce qui doit être noté ici, c'est que le troisième doit être un format de tableau original js et ne peut pas être un tableau de classe ou un objet jQuery, sinon une erreur se produira. être signalé 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, et lorsqu'il est jugé comme étant un élément pair, exécutez simplement return false dans la fonction de rappel

return object;

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

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.