Dans jQuery, comment fonctionne this.each()?

Question

Pour rendre ma question plus spécifique, j'ai lu la documentation sur .each() pour jQuery, mais je suis un peu plus confus. J'ai ce code:

$.fn.imgAreaSelect = function (options) { 
options = options || {}; 

this.each(function() { 
    if ($(this).data('imgAreaSelect')) { 
     if (options.remove) { 
      $(this).data('imgAreaSelect').remove(); 
      $(this).removeData('imgAreaSelect'); 
     } 
     else 
      $(this).data('imgAreaSelect').setOptions(options); 
    } 
    else if (!options.remove) { 
     if (options.enable === undefined && options.disable === undefined) 
      options.enable = true; 

     $(this).data('imgAreaSelect', new $.imgAreaSelect(this, options)); 
    } 
}); 

if (options.instance) 
    return $(this).data('imgAreaSelect'); 

return this; 

}; Maintenant, ce que je ne comprends pas c'est pourquoi chaque fonction n'a pas un index ou un élément? Cet extrait de code provient d'un plugin jQuery que j'essayais de relire. Je ne comprends pas très bien le $ .fn. en haut, je sais que c'est synonyme de prototype, mais qu'est-ce qui se passe exactement ici?

Answer 1

Chaque fonction peut prendre une fonction acceptant un index en tant que paramètre, mais elle est facultative.

Pour des raisons de simplicité, .each a été implémenté pour avoir this se référer à l'élément courant.

Toutefois, .eachpeut accepter un index en tant que paramètre à son rappel.

Il y a un exemple de cette utilisation dans l'API jQuery

$('li').each(function(index) { 
    alert(index + ': ' + $(this).text()); 
}); 

Référence - http://api.jquery.com/each/

Answer 2

Il n'a pas besoin d'index car this fournit le contexte. Comme indiqué par le , "La valeur peut également être accessible via le mot-clé this." Ceci est accompli en utilisant call. Quelque chose comme:

userFunction.call(valueOfElement, indexInArray, valueOfElement); 

$.fn.imgAreaSelect = function (options) signifie que la fonction est ajoutée au prototype. Cela lui permet d'être utilisé avec n'importe quelle instance de l'objet jQuery.

Answer 3

$.each(fn) appelle fn pour chaque élément contenu dans le contexte actuel. Chaque fois qu'il appelle fn, il passe l'élément "en cours" comme this.

Ainsi, dans l'exemple suivant:

$("div").each(function() { 
    alert(this.className); 
}); 

fera apparaître une alerte pour chaque <div> dans les DOM, et afficher le nom de la classe de chacun.