jQuery Traversing - Filteren


De methoden first(), last(), eq(), filter() en not()

De meest elementaire filtermethoden zijn first(), last()en eq(), waarmee u een specifiek element kunt selecteren op basis van zijn positie in een groep elementen.

Andere filtermethoden, zoals filter()en not()stellen u in staat om elementen te selecteren die wel of niet overeenkomen met een bepaald criterium.


jQuery first() Methode

De first()methode retourneert het eerste element van de opgegeven elementen.

<div> In het volgende voorbeeld wordt het eerste element geselecteerd :

Voorbeeld

$(document).ready(function(){
  $("div").first();
});

jQuery last() Methode

De last()methode retourneert het laatste element van de opgegeven elementen.

<div> In het volgende voorbeeld wordt het laatste element geselecteerd :

Voorbeeld

$(document).ready(function(){
  $("div").last();
});


jQuery eq() methode

De eq()methode retourneert een element met een specifiek indexnummer van de geselecteerde elementen.

De indexnummers beginnen bij 0, dus het eerste element heeft het indexnummer 0 en niet 1. In het volgende voorbeeld wordt het tweede <p>element geselecteerd (indexnummer 1):

Voorbeeld

$(document).ready(function(){
  $("p").eq(1);
});

jQuery filter() Methode

Met de filter()methode kunt u een criterium specificeren. Elementen die niet aan de criteria voldoen, worden uit de selectie verwijderd en elementen die wel overeenkomen, worden geretourneerd.

Het volgende voorbeeld retourneert alle <p>elementen met de klassenaam "intro":

Voorbeeld

$(document).ready(function(){
  $("p").filter(".intro");
});

jQuery not() Methode

De not()methode retourneert alle elementen die niet aan de criteria voldoen.

Tip: De not()methode is het tegenovergestelde van filter().

Het volgende voorbeeld retourneert alle <p>elementen die geen klassenaam "intro" hebben:

Voorbeeld

$(document).ready(function(){
  $("p").not(".intro");
});

jQuery-oefeningen

Test jezelf met oefeningen

Oefening:

Gebruik een jQuery-methode om het eerste <div>-element in het document te krijgen.

$("div").();


jQuery Traversing Referentie

Ga voor een compleet overzicht van alle jQuery Traversing-methoden naar onze jQuery Traversing Reference .