Il metodo .each() di jQuery

Un metodo particolare di jQuery inerente all’interazione col DOM è sicuramente .each(). Questo metodo, a differenza di quelli visti sin’ora, non ha come scopo la selezione di un elemento o di un set di elementi, ma assolve ad una funzione differente in quanto assolve un ruolo da protagonista all’interno della possibile struttura di controllo di uno script.

Il metodo .each(), infatti, è utilizzato per iterare un oggetto jQuery contenente una selezione di elementi del DOM. Il metodo in oggetto pretende come parametro una funzione di callback alla quale vengono passati i vari item presenti all’interno dell’oggetto.

Per fare un esempio si supponga di avere, all’interno della nostra pagina, un menu composto, come ovvio, da un insieme di link. Come abbiamo visto nelle precedenti lezioni la selezione di questi link avviene in questo modo:

// seleziono tutti i link del mio menu
$('#menu a');

Per effettuare un loop tra tutti gli item di questo oggetto applicheremo, a questo selettore, il metodo .each in questo modo:

$('#menu a').each(function() {
  // ... faccio qualcosa ...  
});

Attraverso nostra function di callback è possibile passare ad ogni lopp il valore dell’indice corrente, in questo modo:

$('#menu a').each(function(index) {
  document.write(index + '<br>');  
});

Facciamo ora un esempio pratico: supponiamo di voler aggiungere il target "_blank" a tutti i link di un ipotetico sponsor contraddistinti da un’omonima classe:

// ciclo tutti i link selezionati
$('#menu a').each(function() {
  
  // verifico che abbiano la classe sponsor
  if ($(this).is('.sponsor')) {
    
    // in caso affermativo aggiungo l'attributo target con valore "_blank"
    $(this).attr('target','_blank');
     
  }
  
});

In questo esempio abbiamo visto per la prima volta l’utilizzo di $(this): con la keyword this ci si riferisce all’oggetto corrente. All’interno del nostro loop, quindi, $(this) è utilizzato per fare riferimento ad ogni singolo link ciclato.

Nota: qualora si decisa di voler uscira dal ciclo prima della sua conclusione, potremo farlo in ogni momento mediante return false. Ad esempio:

// imposto un contatore
var i = 0;

// ciclo tutti i link selezionati
$('#menu a').each(function() {
  
  // uscita anticipata dopo 5 iterazioni
  if (i == 5) return false;
  else {
    // ...
  }
  i++;
  
});