Filtraggio avanzato con .filter()
Esplorare tutte le potenzialità del metodo .filter(), usando funzioni per applicare una logica personalizzata e selezionare gli elementi in base a proprietà o relazioni dinamiche.
Filtraggio avanzato con .filter() è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.
Affinare le selezioni con .filter()
Il metodo .filter() di jQuery è un modo potente per restringere un insieme esistente di elementi selezionati. Permette di mantenere solo gli elementi che soddisfano criteri specifici.
Lo si può considerare come un secondo livello di selezione, applicato dopo quella iniziale per ottenere una maggiore precisione.
Filtraggio di base con i selettori
Il modo più semplice per usare .filter() consiste nel fornire una stringa di selettore CSS. Funziona come un selettore standard, ma viene applicato solo agli elementi già presenti nell'insieme jQuery corrente.
Selezioniamo tutti i div con la classe .item, quindi applichiamo un filtro per mantenere solo quelli che hanno anche la classe .active.
<!DOCTYPE html>
<html>
<head>
<title>Filter by Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div class="item">Item 1</div>
<div class="item active">Item 2</div>
<div class="item">Item 3</div>
<div class="item active">Item 4</div>
<script>
$(document).ready(function(){
// Select all divs with class 'item'
var allItems = $('div.item');
// Then filter to keep only those with class 'active'
var activeItems = allItems.filter('.active');
activeItems.css('color', 'blue');
});
</script>
</body>
</html>Logica personalizzata con una funzione
La vera forza di .filter() emerge quando si passa una funzione come argomento. In questo modo è possibile applicare a ogni elemento della selezione una logica altamente personalizzata e dinamica.
- La funzione viene eseguita per ogni elemento dell'insieme jQuery corrente.
- Riceve due argomenti:
index(la posizione dell'elemento nell'insieme) eelement(l'elemento DOM grezzo). - Restituisca
trueper mantenere l'elemento efalseper rimuoverlo dall'insieme filtrato.
Filtraggio in base alla posizione dell'indice
È possibile usare l'argomento index nella funzione di filtro per selezionare gli elementi in base alla loro posizione nell'insieme jQuery corrente. È utile per attività come la selezione di un elemento ogni due o di intervalli specifici.
Selezioniamo ogni secondo elemento dell'elenco (quelli con indice pari, a partire da 0) e lo evidenziamo.
<!DOCTYPE html>
<html>
<head>
<title>Filter by Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Item 0</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function(index) {
// Keep items at even indices (0, 2, 4...)
return index % 2 === 0;
}).css('background-color', 'lightgreen');
});
</script>
</body>
</html>In base ad attributi e proprietà
L'argomento element (oppure $(this) all'interno della funzione) consente di esaminare le proprietà, gli attributi o il contenuto testuale di ogni elemento DOM. Questo permette di eseguire filtraggi molto specifici.
Qui individueremo tutti gli elementi dell'elenco che contengono la parola "Important" nel testo e li visualizzeremo in grassetto.
<!DOCTYPE html>
<html>
<head>
<title>Filter by Property</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Task 1</li>
<li>Important Task 2</li>
<li>Task 3</li>
<li>Another Important Task 4</li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function() {
// Check if the text content includes "Important"
return $(this).text().includes('Important');
}).css('font-weight', 'bold');
});
</script>
</body>
</html>Filtraggio dinamico con i dati
Gli attributi data di HTML5 (ad esempio data-status="active") sono perfetti per memorizzare direttamente negli elementi informazioni aggiuntive specifiche dell'applicazione. È possibile usare .filter() per selezionare gli elementi in base a questi valori di dati personalizzati.
Evidenziamo gli elementi dell'elenco contrassegnati come 'complete' usando il loro attributo data-status.
<!DOCTYPE html>
<html>
<head>
<title>Filter by Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li data-status="pending">Task A</li>
<li data-status="complete">Task B</li>
<li data-status="pending">Task C</li>
<li data-status="complete">Task D</li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function() {
// Check the 'data-status' attribute
return $(this).data('status') === 'complete';
}).css('text-decoration', 'line-through');
});
</script>
</body>
</html>Filtraggio in base a elementi figli o genitori
La funzione di filtro può anche esaminare le relazioni tra gli elementi. Ad esempio, potrebbe voler selezionare gli elementi genitori che contengono un determinato elemento figlio, o viceversa.
Qui individueremo gli elementi dell'elenco che contengono un tag <img> e aggiungeremo un bordo.
<!DOCTYPE html>
<html>
<head>
<title>Filter by Relationship</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Text only</li>
<li>Item with <img src="https://placehold.co/16x16" alt="icon"></li>
<li>Another text item</li>
<li>Item with another <img src="https://placehold.co/16x16" alt="image"></li>
</ul>
<script>
$(document).ready(function(){
$('li').filter(function() {
// Check if the current <li> contains an <img>
return $(this).find('img').length > 0;
}).css('border', '2px solid orange');
});
</script>
</body>
</html>Filtri complessi con la logica
All'interno della funzione di filtro può combinare più condizioni usando gli operatori logici standard di JavaScript, come && (AND) e || (OR).
Questo consente selezioni molto precise basate contemporaneamente su diversi criteri, rendendo il filtraggio estremamente potente:
- È visibile? E ha una classe specifica?
- Contiene il testo 'X'? Oppure ha l'attributo data 'Y'?
Filtraggio dinamico in scenari reali
Mettiamo insieme ciò che abbiamo imparato. Immagini di filtrare un elenco di prodotti in base a diversi criteri. La funzione di filtro può verificare dinamicamente più condizioni.
Questo esempio evidenzia i prodotti che sono visibili E appartengono alla categoria 'electronics', usando una logica combinata all'interno della funzione di filtro.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Filtering</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<div class="product" data-category="electronics">Laptop</div>
<div class="product hidden" data-category="books">Novel</div>
<div class="product" data-category="electronics">Mouse</div>
<div class="product" data-category="books">Textbook</div>
<script>
$(document).ready(function(){
$('div.product').filter(function() {
// Filter products that are visible AND in 'electronics' category
var isVisible = $(this).is(':visible');
var isElectronics = $(this).data('category') === 'electronics';
return isVisible && isElectronics;
}).css('background-color', 'lightblue');
});
</script>
</body>
</html>Sfida sul filtraggio
Dato il seguente HTML <li class="item special" data-value="10">...</li>, quale funzione .filter() seleziona correttamente solo gli elementi <li> che hanno la classe .special E un data-value maggiore di 5?
Riepilogo: la potenza del filtraggio dinamico
Ora ha acquisito padronanza degli usi avanzati del metodo .filter() di jQuery!
- Affina le selezioni esistenti, offrendo un controllo preciso.
- L'uso di una funzione consente di applicare una logica di filtraggio dinamica e complessa.
- È possibile esaminare indici, proprietà degli elementi, attributi data e relazioni.
- Combini più condizioni con
&&(AND) e||(OR) per ottenere criteri altamente specifici.
Questo potente metodo consente di creare interfacce utente estremamente reattive e basate sui dati.
Domande Frequenti
La lezione «Filtraggio avanzato con .filter()» è gratuita?
Sì — il testo completo di «Filtraggio avanzato con .filter()» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.
Cosa imparerò in «Filtraggio avanzato con .filter()»?
Esplorare tutte le potenzialità del metodo .filter(), usando funzioni per applicare una logica personalizzata e selezionare gli elementi in base a proprietà o relazioni dinamiche. Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare jQuery Academy?
Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 3.
Quanto tempo richiede la lezione «Filtraggio avanzato con .filter()»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione jQuery Academy?
Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Creazione di pseudo-selettori personalizzati
- Filtraggio avanzato con .filter()
- Esclusione degli elementi con .not()