jQuery esplora - metodo filter()
Esempio
Cambia il colore di tutti i div e aggiungi un bordo alla classe "middle":
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red");
Definizione e uso
Il metodo .filter() riduce la raccolta degli elementi che corrispondono al selettore specificato.
Sintassi
.filter(selector)
| Parametro | Descrizione |
|---|---|
| selector | Valore di stringa, che contiene l'espressione del selettore per abbinare la raccolta corrente di elementi. |
Spiegazione dettagliata
Se viene fornito un oggetto jQuery che rappresenta una raccolta di elementi DOM, il metodo .filter() costruisce una nuova raccolta jQuery di subset di elementi che corrispondono al selettore. Il selettore utilizzato testa ogni elemento; tutti gli elementi che corrispondono al selettore vengono inclusi nel risultato.
Pensa a questa pagina con una lista semplice:
<ul> <li>elemento della lista 1</li> <li>elemento della lista 2</li> <li>elemento della lista 3</li> <li>elemento della lista 4</li> <li>elemento della lista 5</li> <li>elemento della lista 6</li> </ul>
Possiamo applicare questo metodo a questa raccolta di elementi della lista:
$('li').filter(':even').css('background-color', 'red');
Il risultato di questa chiamata è che viene impostato il colore di sfondo a rosso per gli elementi 1, 3, 5, perché tutti e tre corrispondono al selettore (ricorda, :even e :odd utilizzano un index basato su 0).
Utilizzo della funzione di filtraggio
La seconda forma di questo metodo è quella di filtrare gli elementi tramite una funzione invece che tramite selettore. Per ogni elemento, se la funzione restituisce true, l'elemento viene incluso nella raccolta filtrata; altrimenti, viene escluso.
Vediamo questo pezzo di HTML leggermente più complesso:
<ul> <li><strong>lista</strong> elemento 1 - una etichetta strong</li> <li><strong>lista</strong> elemento <strong>2</strong> - due <span>etichette strong</span></li> <li>elemento della lista 3</li> <li>elemento della lista 4</li> <li>elemento della lista 5</li> <li>elemento della lista 6</li> </ul>
Possiamo selezionare questi elementi della lista e poi filtrarli in base al loro contenuto:
$('li').filter(function(index) {
return $('strong', this).length == 1;
).css('background-color', 'red');
