jQuery italia

Filtrare gli elementi selezionati Stampa E-mail
In questo breve articolo ci preme sottolineare un ulteriore caratteristica di jQuery, ovvero quella di poter filtrare ulteriormente
le selezioni effettuate tramite i selettori.
Infatti se ad un primo impatto le opportunità e i criteri di ricerca che mettono a disposizione i selettori possono sembrare
sufficienti, jQuery ci facilita il compito mettendo a disposizione dei selettori ulteriori per poter raffinare ulteriormente la ricerca.
I filtri comunque non servono solamente ad effettuare compiti di raffinamento, ma permettono anche di raggruppare
velocemente ed in maniera semplice elementi che altrimenti non riusciremmo a legare tra loro.

Filtri tramite elementi e contenuti


Riprendiamo da dove ci eravamo lasciati introducendo i selettori, fornendo alcuni esempi di filtri che si possono
utilizzare in jQuery:
  • odd o even per selezionare gli elementi pari o dispari;
  • first o last per selezionare il primo o l'ultimo elemento;
  • lt(n), gt(n) o eq(n) se si vogliono selezionare tutti gli elementi, rispettivamente, precedenti, successivi o uguali
    all'ennesimo (n) elemento (il conto parte da 0).
Ogni parola chiave va preceduta dai due punti e deve fare da suffisso al tag in esame.
Ecco un esempio che chiarisce il suo semplice utilizzo:

$("tr:last"); //seleziona l'ultima riga della tabella (se ve ne è una sola !!!)

Queste keyword sono molto utili e permettono di selezionare in modo molto più rapido ed efficiente quello che si sta ricercando.
Si pensi, riprendendo l'esempio precedente, se si vuole applicare una classe alla sola ultima riga della tabella, basta fare:


$("tr:last").addClass("classe_footer"); //applica la classe classe_footer all'ultima riga della tabella

Se si erano ben capiti questi, se ne possono introdurre degli altri:
  • first-child: seleziona il primo figlio di un elemento;
  • last-child: seleziona l'ultimo figlio di un elemento;
  • only-child: seleziona gli elementi singoli;
  • nth-child(): selezione degli elementi figli in base a quello che sta tra parentesi (even, odd, posizione, ecc).
         Es:   $("#menu_list li:nth-child(even)"); //seleziona i figli pari dell'elemento lista con id = menu_list

Oltre a filtrare gli elementi per ereditarietà come abbiamo visto fino ad ora, possiamo anche filtrare gli elementi in base a
criteri specifici, ovvero a caratteristiche che gli stessi possiedono o che non possiedono.
Ecco alcuni esempi che come al solito rendono più chiaro il discorso:

$("#lista li:has(a)"); // seleziona tutte le voci della lista con id = lista che contengono dei link

$("div:hidden"); //seleziona tutti i div che sono nascosti (hidden)

$("div:not(.footer)"); //seleziona tutti i div che non sono di classe footer


Filtri tramite attributi

Fino ad ora le selezioni sono state fatte utilizzando solamente come mezzo di confronto altri elementi, sia pure per ereditarietà
che per contenuti.
Un altro metodo di creare ottimi filtri è quello di utilizzare gli attributi degli elementi. La sintassi è simile a quella per gli elementi
e resta quindi semplice ed intuitiva.
Vediamo subito alcuni esempi:

$("a[title='clicca qui']"); //seleziona tutti i link che hanno come attributo title = clicca qui

Se jQuery ci fornisse solo questa possibilità sarebbe molto deludente, perchè magari non ricordo esattamente qual'è il title
dei link. Ci vengono quindi in soccorso degli ulteriori derivazioni sintattiche che jQuery efficientemente ci mette a disposizione:

$("a[title^='clicca']"); //seleziona tutti i link il cui title inizia con 'clicca'
$("a[title$='qui']"); //seleziona tutti i link il cui title finisce con 'qui'

$("a[target!='_self']"); //seleziona tutti i link che non aprono nuove finestre

Un uso molto comodo di questi filtri è quando si vogliono assegnare metodi a determinati elementi. Anche se sembra strano
e va contro quello detto sopra, si possono anche usare i filtri senza il valore di confronto: questo comporta la selezione di tutti
i tag che hanno quell'attributo e quindi abbiamo la possibilità di effetture le nostre modifiche in blocco.
Non viene considerato quindi il valore che ha quell'attributo.
Ecco un esempio:

$("a[title]"); //seleziona tutti i link che hanno un title impostato, senza tener conto del valore

Tutti questi filtri come del resto i selettori normali possono essere anche concatenati, ovvero uno di seguito all' altro
per raffinare ulteriormente la ricerca:


$("a[title='apri nuova finestra del browser'] [target='_blank']");

Filtri per form

Un altro tipo di filtri molto importanti sono quelli che riguardano i form. Questi riveste un ruolo di rilievo dato che la maggior parte
dei dati è trattata tramite l'uso di form di inserimento.
Sfruttano delle scorciaotie sintattiche derivanti dall'utilizzo dei filtri per attributo applicati agli elementi dei form.
Ecco un pratico e semplice esempio che mette chiarezza su quanto appena detto:

$("input[type='password']"); //seleziona tutti gli elementi password
diventa, più semplicemente:

$(":password"); //seleziona tutti gli elementi password (come sopra)
 

Chi è online

 18 visitatori online

Sondaggi

Come hai conosciuto jqueryitalia.it ?