JavaScript  »  Guide  »  Guida jQuery 

I filtri del motore di selezione si presentano con una sintassi molto simile aglii pseudoselettori CSS, cioè preceduti dai due punti ":".

Attraverso questi selettori speciali (spesso un'estensione dei selettori nativi CSS) è possibile non solo raffinare la selezione degli elementi, ma raggruppare molto velocemente degli elementi specifici.

Il primo gruppo di filtri riguarda gli "elementi figli", ed è in grado di fornire un metodo di selezione degli elementi in base alla loro posizione rispetto all'elemento contenitore. Nell'esempio qui sotto, il primo selettore troverà solo il primo elemento della lista con id menu, mentre per selezionare l'ultimo useremo il secondo:

$("#menu li:first-child");
$("#menu li:last-child"); 

Infine per ricercare solo gli elementi singoli utilizzeremo:

$("#menu li:only-child"); 

Un caso più complesso è quello del filtro :nth-child() che accetta, tra le parentesi, varie opzioni:

• even: solo elementi pari
• odd: solo elementi dispari
• indice: un numero che indichi la posizione (pertendo da 1)
• equazione: un'equazione

Ecco una pagina di esempio sui possibili utilizzi di questi filtri.

Filtri per gli elementi ed il contenuto

In questa categoria si trovano tutti quei selettori per filtrare gli elementi di una pagina in base a specifici criteri come per esempio la visibilità:

$("div:hidden"); //tutti i tag div nascosti

o ancora in base al loro contenuti:

$("#menu li:has(ul)"); //tutte voci di menu con sottomenu

o, in negativo, in base a ciò che non sono:

$("a:not(.external)"); //tutti i link eccetto quelli con classe external

Anche per questo tipo di filtri non manca la possibilità di filtrare gli elementi in base alla loro posizione nel documento. In questo caso, però, non viene tenuto conto della loro posizione relativamente agli altri elementi adiacenti, bensì vengono presi in considerazione tutti gli elementi anche se ad un livello superiore (esempio):

$("#menu li:first"); //il primo tag lista
$("#menu li:odd"); //tutti gli elementi dispari di una lista
$("#menu li:eq(3)"); // il terzo elemento di una lista

Filtri per i form

Un gruppo di filtri molto interessante è quello dei form. Permette infatti di lavorare con molta facilità sugli elementi dei moduli, un esempio:

$("input[type='text']");

può essere scritto anche:

$(":text");

Con la stessa brevità possiamo ricercare elementi gli elementi disabilitati, magari per abilitarli dinamicamente:

$(":disabled").removeAttr("disabled");

o ancora trovare velocemente i checkbox selezionati dall'utente:

$(":checked");

Per capire meglio l'utlità di questi filtri guardate la pagina di esempio.

Riferimenti:

• Documentazione sui selettori
• Showcase dei selettori jQuery

Altri articoli

Altre guide

Altre newsletter