In jQuery, come funziona this.each()?

Question

Per rendere la mia domanda più specifica, ho letto la documentazione su .each() per jQuery, ma sono un po 'più confuso. Ho questo codice:

$.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; 

};

Ora quello che non capisco è perché le singole funzioni non hanno un indice o un elemento? Questo snippet di codice proviene da un plugin jQuery che stavo cercando di leggere. Inoltre non capisco perfettamente $ .fn. in cima, so che sta per prototipo, ma cosa sta succedendo esattamente qui?

Answer 1

Ciascuna funzione può accettare una funzione accettando un indice come parametro, ma è facoltativo.

Per motivi di semplicità, .each è stato implementato per fare riferimento all'elemento corrente con this.

Tuttavia, .eachpuò accettare un indice come parametro per il suo callback.

C'è un esempio di che l'utilizzo nelle API jQuery

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

Riferimento - http://api.jquery.com/each/

Answer 2

Non ha bisogno di un indice, dal momento che this fornisce il contesto. Come indicato dallo docs, "È possibile accedere al valore anche tramite questa parola chiave." Questo si ottiene usando call. Qualcosa di simile:

userFunction.call(valueOfElement, indexInArray, valueOfElement); 

$.fn.imgAreaSelect = function (options) significa che la funzione viene aggiunto al prototipo. Questo consente di utilizzarlo con qualsiasi istanza dell'oggetto jQuery.

Answer 3

$.each(fn) chiamate fn per ogni elemento contenuto nel contesto corrente. Ogni volta che chiama fn, passa l'elemento "corrente" come this.

Così nel seguente esempio:

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

si aprirà un avviso per ogni <div> nel DOM, e visualizzare il nome della classe di ciascuno.