Selecties in cascade: end()

Zie: http://api.jquery.com/end/

Subselecties zijn ook handig om meerdere selecties op eenzelfde hoofdselectie te combineren tot één instructie. In onderstaand voorbeeld gaan we het eerste, het laatste en het vierde element in een lijst kleuren. Dit kennen we reeds uit het eerste voorbeeld van dit hoofdstuk.

$('main li').first().addClass('highLight');
$('main li').last().addClass('highLight');
$('main li').eq(3).addClass('highLight');

Hoe kunnen we de drie instructies nu herleiden tot één instructie?

★ Open selectors/end.html.

Selecties in cascade

$('main li').first().addClass('highLight').end()     // knop1
.last().addClass('highLight').end()
.eq(3).addClass('highLight');

De hoofdselectie blijft de li-tag. Daarna volgt een eerste subselectie first(). Na het toekennen van de class komt de methode end(). Met deze methode keert u terug naar de hoofdselectie. Vanaf de hoofdselectie kan u dan een nieuwe subselectie voor het laatste element maken. Na het inkleuren opnieuw eindigen met end() en vervolgens het vierde element selecteren.

Heeft deze manier van werken voordelen? De code wordt wat compacter, maar het resultaat is uiteindelijk hetzelfde. In de praktijk kiest u de werkwijze die u persoonlijk het beste ligt.