> For the complete documentation index, see [llms.txt](https://1itf.gitbook.io/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1itf.gitbook.io/jquery/5-selectie-verfijnen-traversing/element-looping-each.md).

# Element looping: each()

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

{% hint style="success" %}
★ Open **selectors/each.html**.
{% endhint %}

![Loop over elementen](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAKTwDpNOATQa1F5v1U%2F-L9q8Scqx1t-ic1gESIF%2Feach.png?generation=1524000110916319\&alt=media)

```javascript
// 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*.