Metodi jQuery per filtrare la selezione degli elementi

Nella precedente lezione abbiamo visto come "andare a spasso" per il DOM al fine di selezionare elementi genitori, fratelli o figli. In questa lezione vedremo una serie di filtri di selezione attraverso i quali è possibile ridurre il numero di elementi individuati sulla base di una serie di criteri.

.filter()

Grazie al metoto .filer() è possibile, appunto, filtrare una selezione specificando un’espressione come suo argomento. Vediamo un esempio:

// seleziono solo i paragrafi con class1 attualmente visibili
// della selezione non faranno parte eventuali paragrafi invisibili
$('p.class1').filter(':visible');

il codice proposto è analogo a:

$('p.class1:visible');

.not()

Questo filtro di negazione è speculare a .filter(). Anche in questo caso dovremo passare un’espressione come argomento, ma la selezione verrà ridotta ai soli elementi che non corrispondono all’espressione indicata.

// seleziono solo i paragrafi con class1 attualmente invisibili
$('p.class1').not(':visible');

.eq()

Riduce la selezione ad un solo elemento, cioè a quello il cui indice corrisponde al numero passato in argomento. Questo filtro restituisce sempre e solo un elemento.

// seleziono il primo paragrafo dell'articolo
// ricordiamoci che il primo elemento ha sempre indice "0"
$('#articolo p').eq(0);

E’ anche possibile passare un valore numerico negativo: in questo caso il conteggio parte dall’ultimo elemento invece che dal primo.

.slice()

Consente di "tagliare" una selezione contenente una pluralità di elementi selezionandole solo alcuni. La selezione avviene mediante il riferimento all’indice degli elementi specificando l’elemento di partenza e quello finale. Solo gli elementi compresi in questo intervallo verranno mantenuti nella selezione. Ad esempio supponiamo di avere una lista del genere:

<ul>
  <li>item A</li>
  <li>item B</li>
  <li>item C</li>
  <li>item D</li>
  <li>item E</li>
  <li>item F</li>
</ul>

Ora vediamo alcuni esempi di utilizzo del metodo .slice():

// seleziono gli elementi C e D
$('li').slice(2,4);

Come avete notato nella nostra selezione è presente l’elemento con indice 2 ma non quello con indice 4, questo perchè l’elemento end non viene incluso nella selezione filtrata.

E’ bene precisare che questo metodo può essere utilizzato anche specificando un unico parametro, così facendo la selezione partirà dall’indice indicato (compreso) ed andrà sino alla fine:

// seleziono gli elementi C, D, E, F
$('li').slice(2);

.first() e .last()

Questi due metodi riducono la selezione ad un solo elemento, rispettivamente il primo e l’ultimo.

// seleziono il primo item della lista
$('#lista li').first();

// seleziono l'ultimo link di un paragrafo
$('p.link a').last();

.has()

Un altro metodo di filtro è .has(). Questo metodo ha la funzione di ridurre la selezione identificando solo gli elementi che hanno un discendente corrispondente all’espressione passata come argomento.

// seleziono solo gli item che contengono, a loro volta, una lista
$('#menu li').has('ul');

.is()

Il metodo .is() è utilizzato per vefiricare se una dato elemento del DOM corrisponde o meno ad un dato selettore. Questo metodo restituisce un valore booleano (true o false a seconda che il selettore sia soddisfatto o meno).

Data la sua natura, questo metodo è utilizzato nella costruzione di istruzioni condizionali ed è un potente alleato nella costruzione di script in cui è necessario verificare se un dato elemento (ignoto) corrisponde o meno a determinati criteri. Vediamo un esempio:

// verifico se un dato elemento è visibile o meno
if ($('#sponsor').is(':visible')) {    
  // ... faccio qualcosa ...    
}