jQuery doorzoeken - eq() methode

Voorbeeld

Maak door een div met index 2 een passende klasse toe te voegen, deze blauw:

$("body").find("div").eq(2).addClass("blue");

Probeer het zelf

Definitie en gebruik

De eq() methode vermindert de geselecteerde elementen tot één die overeenkomt met de opgegeven index.

Syntax

.eq(index)
Parameter Beschrijving
index

Geheel getal, dat de positie van het element aangeeft (minimaal 0).

Is een getal negatief, dan wordt er gerekend van het laatste element van de verzameling af.

Uitleg

Als een jQuery object wordt opgegeven dat een verzameling DOM-elementen vertegenwoordigt, gebruikt de .eq() methode een element uit de verzameling om een nieuw jQuery object te construeren. De index parameter geeft de positie van het element in de verzameling aan.

Bekijk onderstaande eenvoudige lijst:

<ul>
  <li>lijst item 1</li>
  <li>lijst item 2</li>
  <li>lijst item 3</li>
  <li>lijst item 4</li>
  <li>lijst item 5</li>
</ul>

Voorbeeld 1

We kunnen deze methode toepassen op deze lijstitem verzameling:

$('li').eq(2).css('background-color', 'red');

Probeer het zelf

Het resultaat van deze aanroep is dat het item 3 een rode achtergrond krijgt. Let op, index is gebaseerd op nul en verwijst naar de positie van het element in het jQuery object, niet in de DOM boom.

Voorbeeld 2

Als een negatief getal wordt opgegeven, geeft het de positie aan die begint aan het einde van de verzameling, in plaats van aan het begin. Bijvoorbeeld:

$('li').eq(-2).css('background-color', 'red');

Probeer het zelf

Dit keer wordt de achtergrond van item 4 rood, omdat het de tweede is die begint aan het einde van de verzameling.

Voorbeeld 3

Als de methode geen element kan vinden op basis van het opgegeven index parameter, bouwt deze een jQuery object met een lege verzameling, waarbij de length eigenschap 0 is.

$('li').eq(5).css('background-color', 'red');

Probeer het zelf

Hier, geen lijstitems worden rood, omdat .eq(5) de zesde lijstitem aanwijst.