Element looping: each()

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

★ Open selectors/each.html.

Loop over elementen

// knop1
$('main li').first().addClass('highLight'); 
$('main li').last().addClass('highLight');
// knop2 (met lus)
$('main ul').each(function() { 
    $(this).find('li').first().addClass('highLight'); 
    $(this).find('li').last().addClass('highLight');
});
// alternatief voor knop 2 (zonder lus)
// $('main ul li:first-child').addClass('highLight');
// $('main ul li:last-child').addClass('highLight');

De pagina bestaat nu uit drie lijsten. De link op knop1 bevat enkele methodes uit het eerste voorbeeld van dit hoofdstuk. De kleurwijziging geldt niet voor elke lijst, maar loopt deze over alle lijsten heen. Het eerste item van lijst 1 en het laatste item van lijst 3 krijgen de class .highLight.

Om elke lijst apart te kleuren, gaan we de hoofdselectie verplaatsen naar de ul-tags. Met de methode each() doorlopen we alle geselecteerde lijsten. Binnen each() verwijst het kernwoord this naar de actieve ul-tag. De methodes, volgend op $(this) zijn identiek aan de methodes achter knop1.