Erweitertes Filtern mit .filter()
Erkunden Sie die vollständigen Möglichkeiten der Methode .filter(), indem Sie Funktionen für benutzerdefinierte Logik verwenden und Elemente anhand dynamischer Eigenschaften oder Beziehungen auswählen.
Erweitertes Filtern mit .filter() ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.
Auswahlen mit .filter() verfeinern
Die jQuery-Methode .filter() bietet eine leistungsfähige Möglichkeit, eine bereits ausgewählte Elementmenge einzugrenzen. Sie behalten damit nur die Elemente, die bestimmte Kriterien erfüllen.
Stellen Sie sich die Methode als eine zweite Auswahlstufe vor, die nach der ersten Auswahl angewendet wird und für mehr Genauigkeit sorgt.
Grundlegendes Filtern mit Selektoren
Die einfachste Möglichkeit, .filter() zu verwenden, besteht darin, einen CSS-Selektor-String zu übergeben. Das funktioniert wie ein gewöhnlicher Selektor, wird aber nur auf die Elemente angewendet, die bereits in Ihrer aktuellen jQuery-Menge enthalten sind.
Wählen wir alle div-Elemente mit der Klasse .item aus und filtern sie anschließend so, dass nur diejenigen mit der zusätzlichen Klasse .active übrig bleiben.
<!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>Benutzerdefinierte Logik mit einer Funktion
Die eigentliche Stärke von .filter() zeigt sich, wenn Sie eine Funktion als Argument übergeben. Damit können Sie auf jedes Element Ihrer Auswahl eine individuell angepasste und dynamische Logik anwenden.
- Die Funktion wird für jedes Element der aktuellen jQuery-Menge ausgeführt.
- Sie erhält zwei Argumente:
index(die Position des Elements in der Menge) undelement(das rohe DOM-Element). - Geben Sie
truezurück, um das Element beizubehalten, undfalse, um es aus der gefilterten Menge zu entfernen.
Nach der Indexposition filtern
Mit dem Argument index in Ihrer Filterfunktion können Sie Elemente anhand ihrer Position in der aktuellen jQuery-Menge auswählen. Das ist beispielsweise nützlich, wenn Sie jedes zweite Element oder bestimmte Bereiche auswählen möchten.
Wählen wir jedes zweite Listenelement aus (Elemente mit geradem Index, beginnend bei 0) und heben es hervor.
<!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>Nach Attributen und Eigenschaften
Mit dem Argument element (oder $(this) innerhalb der Funktion) können Sie die Eigenschaften, Attribute oder den Textinhalt jedes DOM-Elements untersuchen. Dadurch wird ein sehr gezieltes Filtern möglich.
Hier suchen wir alle Listenelemente, deren Text das Wort "Important" enthält, und formatieren sie fett.
<!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>Dynamisches Filtern mit Daten
HTML5-data-Attribute (z. B. data-status="active") eignen sich ideal, um zusätzliche anwendungsspezifische Informationen direkt in Elementen zu speichern. Mit .filter() können Sie Elemente anhand dieser benutzerdefinierten Datenwerte auswählen.
Heben wir Listenelemente hervor, die mithilfe ihres data-status-Attributs als 'complete' markiert sind.
<!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>Nach untergeordneten oder übergeordneten Elementen filtern
Ihre Filterfunktion kann auch die Beziehungen zwischen Elementen untersuchen. Beispielsweise möchten Sie vielleicht übergeordnete Elemente auswählen, die ein bestimmtes untergeordnetes Element enthalten, oder umgekehrt.
Hier suchen wir Listenelemente, die ein <img>-Tag enthalten, und fügen ihnen einen Rahmen hinzu.
<!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>Komplexe Filter mit Logik
Innerhalb Ihrer Filterfunktion können Sie mehrere Bedingungen mit den standardmäßigen logischen Operatoren von JavaScript wie && (UND) und || (ODER) verknüpfen.
Dadurch sind sehr präzise Auswahlen anhand mehrerer Kriterien gleichzeitig möglich, wodurch Ihr Filter besonders leistungsfähig wird:
- Ist das Element sichtbar UND besitzt es eine bestimmte Klasse?
- Enthält es den Text 'X' ODER besitzt es das Datenattribut 'Y'?
Dynamisches Filtern in der Praxis
Fügen wir nun das Gelernte zusammen. Stellen Sie sich vor, Sie filtern eine Produktliste anhand mehrerer Kriterien. Ihre Filterfunktion kann verschiedene Bedingungen dynamisch prüfen.
Dieses Beispiel hebt Produkte hervor, die sowohl sichtbar SIND als auch zur Kategorie 'electronics' gehören, wobei innerhalb der Filterfunktion eine kombinierte Logik verwendet wird.
<!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>Herausforderung: Filtern
Gegeben sei das folgende HTML: <li class="item special" data-value="10">...</li>. Welche .filter()-Funktion wählt nur <li>-Elemente aus, die die Klasse .special UND einen data-value größer als 5 besitzen?
Zusammenfassung: Die Leistungsfähigkeit des dynamischen Filterns
Sie beherrschen nun die fortgeschrittene Verwendung der jQuery-Methode .filter()!
- Sie verfeinert bestehende Auswahlen und ermöglicht eine präzise Kontrolle.
- Durch die Verwendung einer Funktion werden dynamische und komplexe Filterlogiken möglich.
- Sie können Indizes, Elementeigenschaften, Datenattribute und Beziehungen untersuchen.
- Verknüpfen Sie mehrere Bedingungen mit
&&(UND) und||(ODER), um sehr spezifische Kriterien zu formulieren.
Mit dieser leistungsfähigen Methode können Sie äußerst reaktionsfähige und datenbasierte Benutzeroberflächen erstellen.
Häufig gestellte Fragen
Ist die Lektion „Erweitertes Filtern mit .filter()“ kostenlos?
Ja — der vollständige Text von „Erweitertes Filtern mit .filter()“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Erweitertes Filtern mit .filter()“?
Erkunden Sie die vollständigen Möglichkeiten der Methode .filter(), indem Sie Funktionen für benutzerdefinierte Logik verwenden und Elemente anhand dynamischer Eigenschaften oder Beziehungen auswähle… Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um jQuery Academy zu starten?
Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.
Wie lange dauert die Lektion „Erweitertes Filtern mit .filter()“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?
Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Benutzerdefinierte Pseudo-Selektoren erstellen
- Erweitertes Filtern mit .filter()
- Elemente mit .not() ausschließen