Avansert filtrering med .filter()
Utforsk alle mulighetene i metoden .filter(), bruk funksjoner til å anvende egendefinert logikk og velg elementer basert på dynamiske egenskaper eller relasjoner.
Avansert filtrering med .filter() er en gratis leksjon i jQuery Academy på CoddyKit. Dette er leksjon 2 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i jQuery Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i jQuery Academy inneholder totalt 3 leksjoner.
Forbedre utvalg med .filter()
.filter()-metoden i jQuery er en kraftig måte å begrense et eksisterende utvalg av elementer på. Den lar Dem beholde bare elementene som oppfyller bestemte kriterier.
Tenk på det som et ekstra utvalgslag som brukes etter det første utvalget, slik at De oppnår større presisjon.
Grunnleggende filtrering med velgere
Den enkleste måten å bruke .filter() på er å angi en CSS-velgerstreng. Dette fungerer akkurat som en vanlig velger, men gjelder bare for elementene som allerede finnes i det gjeldende jQuery-utvalget.
La oss velge alle div-elementer med klassen .item og deretter filtrere dem slik at bare de som også har klassen .active, beholdes.
<!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>Egendefinert logikk med en funksjon
Den virkelige styrken til .filter() kommer til uttrykk når De sender en funksjon som argument. Da kan De bruke svært egendefinert og dynamisk logikk på hvert element i utvalget.
- Funksjonen kjøres for hvert element i det gjeldende jQuery-utvalget.
- Den mottar to argumenter:
index(elementets plassering i utvalget) ogelement(det rå DOM-elementet). - Returner
truefor å beholde elementet ogfalsefor å fjerne det fra det filtrerte utvalget.
Filtrering etter indeksplassering
De kan bruke argumentet index i filterfunksjonen til å velge elementer basert på plasseringen deres i det gjeldende jQuery-utvalget. Dette er nyttig når De for eksempel skal velge annethvert element eller bestemte intervaller.
La oss velge annethvert listeelement (elementene med partallsindeks, med start på 0) og utheve dem.
<!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>Basert på attributter og egenskaper
Argumentet element (eller $(this) inne i funksjonen) lar Dem undersøke egenskapene, attributtene eller tekstinnholdet til hvert DOM-element. Dette muliggjør svært spesifikk filtrering.
Her finner vi alle listeelementer som inneholder ordet "Important" i teksten, og gjør dem fete.
<!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>Dynamisk filtrering med data
HTML5-dataattributter (for eksempel data-status="active") egner seg perfekt til å lagre ekstra, programspesifikk informasjon direkte i elementer. De kan bruke .filter() til å velge elementer basert på disse egendefinerte dataverdiene.
La oss utheve listeelementer som er merket som 'complete', ved hjelp av data-status-attributtet.
<!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>Filtrering etter under- eller overordnet element
Filterfunksjonen kan også undersøke relasjonene mellom elementer. De kan for eksempel ønske å velge overordnede elementer som inneholder et bestemt underelement, eller omvendt.
Her finner vi listeelementer som inneholder en <img>-tagg, og legger til en ramme.
<!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>Komplekse filtre med logikk
Inne i filterfunksjonen kan De kombinere flere betingelser ved hjelp av vanlige logiske operatorer i JavaScript, som && (OG) og || (ELLER).
Dette gjør det mulig å opprette svært presise utvalg basert på flere kriterier samtidig, og gjør filtreringen svært kraftig:
- Er elementet synlig? OG har det en bestemt klasse?
- Inneholder det teksten 'X'? ELLER har det dataattributtet 'Y'?
Dynamisk filtrering i praksis
La oss sette sammen det vi har lært. Tenk Dem at De filtrerer en produktliste basert på flere kriterier. Filterfunksjonen kan kontrollere flere betingelser dynamisk.
Dette eksempelet uthever produkter som både er synlige OG tilhører kategorien 'electronics', ved hjelp av kombinert logikk i filterfunksjonen.
<!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>Filtreringsutfordring
Gitt HTML-en <li class="item special" data-value="10">...</li>, hvilken .filter()-funksjon velger bare <li>-elementer som har klassen .special OG en data-value som er større enn 5?
Oppsummering: kraften i dynamisk filtrering
De har nå fått full kontroll over avansert bruk av jQuerys .filter()-metode!
- Den forbedrer eksisterende utvalg og gir presis kontroll.
- Ved å bruke en funksjon får De tilgang til dynamisk og kompleks filtreringslogikk.
- De kan undersøke indekser, elementegenskaper, dataattributter og relasjoner.
- Kombiner flere betingelser med
&&(OG) og||(ELLER) for svært spesifikke kriterier.
Denne kraftige metoden lar Dem opprette svært responsive og datadrevne brukergrensesnitt.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 22
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Avansert filtrering med .filter()» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien jQuery Academy, inkludert «Avansert filtrering med .filter()», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i jQuery Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «Avansert filtrering med .filter()»?
Utforsk alle mulighetene i metoden .filter(), bruk funksjoner til å anvende egendefinert logikk og velg elementer basert på dynamiske egenskaper eller relasjoner. Du øver på jQuery Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med jQuery Academy?
Ingen tidligere erfaring er nødvendig. jQuery Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 3.
Hvor lang tid tar leksjonen «Avansert filtrering med .filter()»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne jQuery Academy-leksjonen?
Ja. Alle jQuery Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Bygge egendefinerte pseudovelgere
- Avansert filtrering med .filter()
- Utelukke elementer med .not()