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");
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');
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');
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');
Hier, geen lijstitems worden rood, omdat .eq(5) de zesde lijstitem aanwijst.