L'exemple de cet article décrit l'utilisation de jQuery.fn.each et jQuery.each dans l'analyse du code source jQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :
Commençons par l'exemple. La fonction du code suivant est d'ajouter une classe rouge à chaque élément div sélectionné
.
$('div').each(function(index, elem) {
$(this).addClass('red');
>
});
Le .each utilisé ci-dessus est jQuery.fn.each, qui est implémenté en interne via jQuery.each
jQuery.fn.each
Tout d’abord, publions la description officielle de l’API. C’est très simple. Il n’y a que deux points à noter
.
$(this).addClass('red') dans l'exemple ci-dessus, où this fait référence à l'élément dom actuellement utilisé
La méthode transmise dans chacun peut renvoyer n'importe quelle valeur. Lorsque la valeur renvoyée est fausse, sortez de l'opération de boucle actuelle
.
/**
* @description Exécuter une méthode pour chaque élément dom correspondant dans l'objet jQuery
* @param {Number} index La position de l'élément actuellement traité dans la collection
* @param {DOMElement} Element L'élément dom actuellement traité
*/
.
.each( function(index, Element) )
Voici deux exemples simples
Exemple 1 :
Ajouter une classe rouge à tous les éléments div de la page
$('div').each(function(index, elem) {
$(this).addClass('red');
>
});
Exemple 2
Ajouter la classe rouge aux 5 premiers éléments div de la page
$('div').each(function(index, elem) {
If(index>=5) return false; // Sortir de la boucle
$(this).addClass('red');
>
});
Comme ci-dessus, l'utilisation est assez simple, je n'entrerai donc pas dans les détails. Pour plus de détails, veuillez consulter http://api.jquery.com/each/.
Le code source interne est implémenté via jQuery.each. Parlons du code source de jQuery.each Après avoir parlé du code source de jQuery.each, le code source de jQuery.fn.each est très simple
jQuery.each :
Prenons d'abord un exemple simple
$.each([52, 97], function(index, value ) {
alert(index ': 'value':' this);
>
});
Le contenu de sortie est le suivant :
0 : 52-52
1
1 : 97-97
Description officielle de l'API de la classe
Il y a également deux points à noter
Dans l'exemple ci-dessus, il s'agit de l'élément de la collection, c'est-à-dire le valueOfElement suivant
Renvoyez false dans le rappel pour sortir de la boucle
/**
* @description Effectuer une opération sur chaque élément de la collection (tableau ou objet)
* @param {Number|String} indexInArray La position correspondante de l'élément dans la collection (si la collection est un tableau, c'est un nombre ; si la collection est un objet, c'est une valeur clé)
* @param {AnyValue} valueOfElement L'élément de la collection
*/
j
jQuery.each(collection, callback(indexInArray, valueOfElement))
Exemple 1
$.each( ['un,'deux','trois' , 'quatre'], fonction(index, valeur){
If(index >= 2) renvoie false;
alert( "Index :" index ", valeur : " valeur );
>
});
Exemple 2
L'exemple est copié directement du site officiel, il suffit de s'en contenter
$.each( { nom : "John", lang : "JS " }, fonction(k, v){
alert( "Clé : " k ", Valeur : " v );
>
});
Code source :
// args est destiné à un usage interne uniquement
e
chacun : fonction (obj, rappel, args) {
valeur var,
je = 0,
longueur = obj.longueur,
isArray = isArraylike( obj ); // Obj est-il un objet de type tableau, tel que {'0':'hello', '1':'world', 'length':2}, qui sert en fait des objets jQuery
If ( args ) { // args, en fait, je n'ai trouvé aucun effet réel de ce paramètre ~~ Il suffit de sauter et de regarder le contenu dans else Il n'y a pas d'autre différence sauf que les paramètres passés dans le rappel sont différents
if ( isArray ) {
pour ( ; je < longueur; je ) {
value = callback.apply( obj[ i ], args );
Si ( valeur === faux ) {
pause;
}
}
} autre {
pour ( je dans obj ) {
value = callback.apply( obj[ i ], args );
Si ( valeur === faux ) {
pause;
}
}
>
// Un étui spécial, rapide, pour l'usage le plus courant de chacun
} autre {
if ( isArray ) {
pour ( ; je < longueur; je ) {
value = callback.call( obj[ i ], i, obj[ i ] );
Si ( valeur === faux ) {
pause;
}
}
} Sinon {// Objets de traitement
pour ( je dans obj ) {
value = callback.call( obj[ i ], i, obj[ i ] ); // value est la valeur de retour du rappel
If (value === false) {// Notez ici, lorsque value === false, sortez directement du cycle
pause;
}
}
>
>
Retourner l'objet ;
>
},
Code source jQuery.fn.each tardif :
C'est vraiment simple. Tant que vous comprenez jQuery.each, ça devrait aller. Il n'y a rien à dire ~
chacun : fonction(rappel, args) {
Renvoie jQuery.each( this, callback, args );
>
},
Conclusion
Identique à jQuery.extend et jQuery.fn.extend, bien que les codes de jQuery.each et jQuery.fn.each soient très simples, ils jouent également un rôle très important. Ces deux méthodes sont largement utilisées dans jQuery, par exemple. exemple :
jQuery.each("Boolean Number String Function Array Date RegExp Object Error" .split( " "), fonction(i, nom) {
Class2type[ "[objet " nom "]" ] = nom.toLowerCase();
>
});
Alors, maîtrisez chacun !
J'espère que cet article sera utile à la programmation jQuery de chacun.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
