jQuery: Filtri per il contenuto e Filtri Visibilità

Continuiamo con le nostre lezioni su jQuery.
Oggi andremo a vedere altre tre tipologie di filtri:

• i filtri per il contenuto, detti “Content Filter”
• i filtri che lavorano sulla visibilità degli elementi, cioè i “Visibility Filter”
• filtri per elementi di tipo “child”

Come per le altre due lezioni iniziamo anche questa con una tabella che ci mostra i valori che i nostri filtri possono assumere.

Content Filter	Tipologia d’uso
:contains(testo)	filtra tutti quegli elementi che contengono la stringa specificata testo
:empty	questo secondo filtro seleziona soltanto gli elementi vuoti.
:has(selector)	in questo caso gli elementi che hanno un contenuto che corrisponde al selettore specificato vengono selezionati.
:parent	viene selezionato l’elemento genitore
Visibility Filter	Tipologia d’uso
:visible	in questo caso vengono selezionati soltanto gli elementi visibili.
:hidden	si tratta del filtro reciproco rispetto al precedente, vengono selezionati gli elementi che invece risultano invisibili.
Child Filter	Tipologia d’uso
:nth-child(index) :nth-child(even) :nth-child(odd) :nth-child(equazione)	Volete utilizzare una delle proprietà più interessanti dei CSS3 anche se al momento non tutti browser sopportano tali funzionalità? Bene in questo caso tenete in mente questa serie di filtri di tipo nt-child. Permettono di selezionare gli elementi con un indice specificato, elementi pari e dispari e addirittura potete selezionare gli elementi in base ad un’equazione.
:first-child	viene selezionato l’elemento che è il primo figlio del genitore
:last-child	viene selezionato l’elemento che invece è l’ultimo figlio del genitore
:only-child	in quest’ultimo caso viene selezionato l’elemento che è l’unico figlio del genitore.

Come sempre la parte head del documento è la solita che abbiamo visto nelle due precedenti lezioni. Una piccola modifica riguarda invece la sezione del body:

</pre>
<ul id="lista">
	<li class="a">Elemento 1</li>
	<li class="a">Elemento 2</li>
	<li class="b">Elemento 3</li>
	<li class="b">Elemento 3</li>
</ul>
<pre>
Paragrafo 1

Paragrafo 2

Paragrafo 3

Paragrafo 4

iniziamo quindi con negli esempi.
Nel nostro primo esempio andiamo selezionare gli elementi di tipo paragrafo che al loro interno contengono la stringa “3”.

$("p:contains(3)").css("border","3px solid black");

Se vi divertite ad aggiungere ad altri paragrafi il numero 3 vedrete che jQuery selezionerà gli elementi che per l’appunto contengono la stringa di testo “3”.

Supponiamo che volete selezionare tutti quanti gli elementi all’interno della pagina web che contengono al loro interno la stringa “3”. In questo caso che cosa facciamo?La prima che ci viene in mente è sicuramente quella di rimuovere la specifica p prima del filtro, e scrivere il tutto quindi così:

$(":contains(3)").css("border","3px solid black");

ma ecco cosa succede:

Per essere il più possibile chiaro e per farvi comprendere meglio il tutto ho anche riportato lo screenshot di quanto succede qui sopra.
Come vedete sembra che jQuery ha selezionato un po’ tutto.
Questo perché ha selezionato il body che contiene il tre giustamente, ma anche l’elemento lista “<ul>” contiene l’elemento “3” e così via.

Nel caso in cui vogliamo fare una selezione del genere dobbiamo specificare gli elementi genitore che ci interessano, nel caso del nostro esempio quindi è:

$("p:contains(3),li:contains(3)").css("border","3px solid black");

Andiamo avanti, vediamo adesso come si utilizzano i filtri di tipo parent.

$("p:parent").css("border","3px solid black");

se provate questa porzioni di codice vedete che tutti quanti gli elementi di tipo paragrafo vengono selezionati.
Andando avanti troviamo un altro selettore:

$("ul:has(li[class=a])").css("border","3px solid black");

L’effetto di questa selezione sono gli elementi di tipo lista che hanno come classe “a”.
Vedete come viene selezionato l’intero blocco di vista, e non soltanto gli elementi di tipo li con classe “a”.

Andiamo a vedere gli elementi di tipo nth-child. Si tratta di uno dei miei selettori preferiti, in quanto consentono di realizzare effetti grafici molto semplice ma allo stesso tempo efficace con poche righe di codice, e senza impazzire con chissà quali elementi HTML o CSS.

La loro utilità è così elevata che il consorzio w3c ha deciso che questi selettori fanno parte degli standard HTML5 e CSS3, ed in effetti possono essere già utilizzati con dei browser che sopportano tale tecnologia (leggi tutti tranne Internet Explorer).

In questo caso andremo a selezionare gli elementi di tipo lista con indice pari a tre.

$("ul li:nth-child(3)").css("border","3px solid black");

Come vedete all’interno della selettore è presente uno spazio tra ul ed li. Questo perché esattamente come già avviene solitamente nel codice CSS lo spazio va ad indicare una relazione di parentela fra gli elementi.

Immaginiamo che all’interno di una lista vogliamo colorare o contornare diversamente gli elementi in base alla posizione.
Si tratta del caso tipico in cui per una maggiore leggibilità utilizziamo righe in cui il colore di sfondo si alterna. Sto parlando delle cosiddette “righe zebrate”.

L’effetto che si otterrebbe è simile all’immagine che ha scelto per questo articolo.Per farlo con jQuery è semplicissimo: sarà sufficiente dare agli elementi un valore oppure un altro in base alla posizione.
In questo caso vediamo la selezione per mezzo di una espressione matematica, ma sarebbe possibile ottenere lo stesso effetto per mezzo di una selezione di elementi pari o dispari.

$("ul li:nth-child(2n)").css("border","3px solid black");

A questo punto è importante fare una precisazione: se provate questo codice vedete che la seconda riga che l’ultima della lista vengono bordate. In base a quanto abbiamo detto in precedenza dovrebbero risultare con il bordo invece la prima e la terza riga, perché jQuery assegna al primo elemento indice zero, al secondo indice uno e così via.

In questo caso però c’è un’eccezione: quando viene specificata l’espressione matematica, jQuery conta gli elementi a partire da uno.
Selezionando quindi in una maniera opportuna elementi con questo codice possiamo ottenere degli splendidi effetti all’interno delle nostre pagine web. Nella prossima lezione andiamo invece a vedere gli altri filtri di tipo Child e i filtri di visibilità.