5 Selectie verfijnen (traversing)

Een jQuery selector is al zeer krachtig, maar soms volstaat één selector niet en gaan we de selectie verder moeten verfijnen. We beginnen met enkele voorbeelden die we verder in dit hoofdstuk uitgebreid bespreken:

Stel dat we het eerste en het laatste item in een lijst willen kleuren. Dit kan perfect met de selectiemethodes uit voorgaand hoofdstuk. Maar wat als de pagina meerdere lijsten bevat waarvan we telkens het eerste en laatste item willen kleuren? Dit kan reeds met $('ul li:first-child, ul li:last-child') maar in dit hoofdstuk gaan we op zoek naar een beter alternatief.

Een tweede voorbeeld: de pagina bevat een ratingsysteem met sterretjes. Als we één van de sterretjes aanklikken moeten deze ster plus alle voorgaande sterren van kleur veranderen.

Met de methodes die we in dit hoofdstuk bespreken (traversing methodes) is dit perfect mogelijk. In de voorbeelden beperken we ons tot een set van methodes die we in de volgende hoofdstukken nog regelmatig tegenkomen.

Een overzicht van de verschillende traversing methodes vindt u hier: http://api.jquery.com/category/traversing/

In de meeste voorbeelden van dit hoofdstuk wordt door het click-event de class .highLight toegevoegd aan een bepaalde selectie.

Bijvoorbeeld:

// Knop1
$('#first').click(function(){
    $('*').removeClass('highLight');
    $('li').first().addClass('highLight');
});

De eerste lijn binnen het click-event wist op elk element de class .highLight. De tweede lijn maakt een nieuwe selectie waarop de class .highLight wordt toegepast.

Om ons volledig te concentreren op de selectiemethodes, tonen we in de voorbeelden enkel de relevante code. Kijk steeds in de broncode voor het volledig script.

$('li').first().addClass('highLight');    // Knop1