JavaScript  »  Guide  »  Guida jQuery 

Nelle lezioni precedenti abbiamo visto come sia possibile, attraverso i selettori CSS, ottenere una collezione di elementi da un documento HTML in modo da poterli manipolare e modificare con jQuery. In alcuni casi, tuttavia, questa collezione potrebbe risultare incompleta oppure poco raffinata per poterci permettere di lavorare al meglio. Inoltre potremmo pensare di utilizzarla come base per attraversare dinamicamente gli altri elementi del DOM e lavorarvi. A queste necessità rispondono una serie di metodi definiti Traversing.

Filtrare la collezione

Oltre al metodo .eq()(visto in precedenza), jQuery mette a disposizione alcuni metodi per filtrare la collezione di elementi. Uno dei più utili è sicuramente .filter() che accetta come argomento sia un selettore CSS, sia una funzione. Nel primo caso basterà passare la stringa alla funzione per eliminare tutti gli elementi che non corrispondono alle regole indicate:

$("#contenitore a").filter(".external"); //restituisce solo i  link con classe external

In alternativa si può definire una funzione che operi da filtro restituendo true o false. Adattando l'esempio precedente dovremmo scrivere:

$("#contenitore a").filter(function () {

	// this rappresenta un singolo elemento
  return $(this).hasClass("external");

});

Il metodo opposto a .filter() è .not(), che include tutti gli elementi che NON corrispondono al selettore indicato.

$("#contenitore a").not(".external"); //tutti i link senza classe external

Molto simile a .eq() è .slice(), che opera nello stesso modo del metodo per array nativo in JavaScript, estraendo un specifica porzione della collezione:

$("#contenitore a").slice(0, 2) // solo il primo e secondo link

Chiude il gruppo dei filtri .is(), che accetta un selettore CSS come argomento e restituisce true quando gli elementi rispettano le regole indicate. Questo metodo è particolamente utile nelle strutture di controllo all'interno di cicli .each() per suddividere le operazioni da compiere sugli elementi in base ai valori di this:

$("#contenitore a").each(function () {

  if ($(this).is(".external")) {
		  //codice per link esterni
  } else {
		  //codice per link interno
  }

});

Altri articoli

Altre guide

Altre newsletter