jQuery Academy · Les

Geavanceerd filteren met .filter()

Verken de volledige mogelijkheden van de methode .filter(), gebruik functies om aangepaste logica toe te passen en selecteer elementen op basis van dynamische eigenschappen of relaties.

Les 2 van 311 stappen

Geavanceerd filteren met .filter() is een gratis jQuery Academy-les op CoddyKit. Dit is les 2 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject jQuery Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus jQuery Academy bevat in totaal 3 lessen.

Selecties verfijnen met .filter()

De methode .filter() in jQuery is een krachtige manier om een bestaande set geselecteerde elementen te verkleinen. Hiermee houd je alleen de elementen over die aan specifieke criteria voldoen.

Je kunt het zien als een tweede selectielaag die je na je eerste selectie toepast voor een nauwkeuriger resultaat.

Eenvoudig filteren met selectors

De eenvoudigste manier om .filter() te gebruiken is door een CSS-selectorreeks op te geven. Dit werkt net als een standaardselector, maar wordt alleen toegepast op de elementen die al in je huidige jQuery-set staan.

Laten we alle div-elementen met de klasse .item selecteren en ze vervolgens filteren, zodat alleen de elementen overblijven die ook de klasse .active hebben.

<!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>

Aangepaste logica met een functie

De echte kracht van .filter() komt naar voren wanneer je een functie als argument doorgeeft. Daarmee kun je zeer aangepaste en dynamische logica op elk element in je selectie toepassen.

De functie wordt uitgevoerd voor elk element in de huidige jQuery-set.
De functie ontvangt twee argumenten: index (de positie van het element in de set) en element (het onbewerkte DOM-element).
Geef true terug om het element te behouden en false om het uit de gefilterde set te verwijderen.

Filteren op indexpositie

Je kunt het argument index in je filterfunctie gebruiken om elementen te selecteren op basis van hun positie binnen de huidige jQuery-set. Dit is handig voor taken zoals het selecteren van elk tweede item of van specifieke bereiken.

Laten we elk tweede lijstitem selecteren (de items met even indexen, vanaf 0) en deze markeren.

<!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>

Op basis van attributen en eigenschappen

Met het argument element (of $(this) binnen de functie) kun je de eigenschappen, attributen of tekstinhoud van elk DOM-element bekijken. Zo kun je zeer gericht filteren.

Hier zoeken we alle lijstitems waarvan de tekst het woord "Important" bevat en maken we deze vet.

<!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>

Dynamisch filteren met gegevens

HTML5-data-attributen (bijvoorbeeld data-status="active") zijn ideaal om extra, toepassingsspecifieke informatie rechtstreeks in elementen op te slaan. Je kunt .filter() gebruiken om elementen te selecteren op basis van deze aangepaste gegevenswaarden.

Laten we lijstitems markeren die met 'complete' zijn aangeduid via hun attribuut 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>

Filteren op onderliggend of bovenliggend element

Je filterfunctie kan ook de relaties tussen elementen bekijken. Je wilt bijvoorbeeld bovenliggende elementen selecteren die een specifiek onderliggend element bevatten, of andersom.

Hier zoeken we lijstitems die een <img>-tag bevatten en voegen we een rand toe.

<!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>

Complex filteren met logica

Binnen je filterfunctie kun je meerdere voorwaarden combineren met standaard logische operatoren van JavaScript, zoals && (EN) en || (OF).

Hiermee kun je zeer nauwkeurig selecteren op basis van meerdere criteria tegelijk, waardoor je uitzonderlijk krachtig kunt filteren:

Is het element zichtbaar? EN heeft het een specifieke klasse?
Bevat het de tekst 'X'? OF heeft het data-attribuut 'Y'?

Dynamisch filteren in de praktijk

Laten we alles wat we hebben geleerd combineren. Stel je voor dat je een productlijst filtert op basis van meerdere criteria. Je filterfunctie kan verschillende voorwaarden dynamisch controleren.

In dit voorbeeld markeren we producten die zowel zichtbaar zijn ALS tot de categorie 'electronics' behoren, met gecombineerde logica binnen de filterfunctie.

<!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>

Filteruitdaging

Gegeven de HTML <li class="item special" data-value="10">...</li>: welke .filter()-functie selecteert alleen <li>-elementen die de klasse .special hebben EN een data-value groter dan 5?

Beantwoord dit in de interactieve les

Samenvatting: de kracht van dynamisch filteren

Je beheerst nu de geavanceerde toepassingen van jQuery's methode .filter()!

De methode verfijnt bestaande selecties en biedt nauwkeurige controle.
Met een functie ontgrendel je dynamische en complexe filterlogica.
Je kunt indexen, elementeigenschappen, data-attributen en relaties bekijken.
Combineer meerdere voorwaarden met && (EN) en || (OF) voor zeer specifieke criteria.

Met deze krachtige methode kun je uiterst responsieve en gegevensgestuurde gebruikersinterfaces maken.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 22
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Geavanceerd filteren met .filter()” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad jQuery Academy, waaronder “Geavanceerd filteren met .filter()”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus jQuery Academy bevat in totaal 3 lessen.

Wat leer ik in “Geavanceerd filteren met .filter()”?

Verken de volledige mogelijkheden van de methode .filter(), gebruik functies om aangepaste logica toe te passen en selecteer elementen op basis van dynamische eigenschappen of relaties. Je oefent met jQuery Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met jQuery Academy te beginnen?

Ervaring vooraf is niet nodig. jQuery Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 3.

Hoe lang duurt de les “Geavanceerd filteren met .filter()”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over jQuery Academy?

Ja. Elke les over jQuery Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar jQuery Academy