# Hiërarchische selectors
Zie:
Hiërarchische subselecties zijn uiterst handig om op een snelle en elegante manier elementen binnen de boomstructuur te benaderen. Deze methodes zal u verder in dit boek nog regelmatig tegenkomen.
## Parent(), parents(), children() en find()
Selecteer hoger of lager gelegen elementen in de boomstructuur.
{% hint style="success" %}
★ Open **selectors/parent.html**.
{% endhint %}
```javascript
$('#theItem').parent().addClass('highLight'); // knop1
$('#theItem').parent().parent().addClass('highLight'); // knop2
$('#theItem').parents().addClass('highLight'); // knop3
$('#theItem').parents('ul').addClass('highLight'); // knop4
$('#theItem').children().addClass('highLight'); // knop5
$('#theItem').children('li').addClass('highLight'); // knop6
$('#theItem').find('li').addClass('highLight'); // knop7
```
In deze voorbeelden vertrekt de hoofdselectie telkens van de li-tag met id *#theItem*.
* `$('#theItem').parent()`
Selecteer het parent element van de li-tag. In dit voorbeeld is dit de ul-tag rond de li-tag met id *#theItem*.
* `$('#theItem').parent().parent()`\
Ga twee stappen hoger in de boomstructuur. Dit is de li-tag waarbinnen zich de ul-tag uit vorige selectie bevindt.
* `$('#theItem').parents()`\
Selecteer alle ancestor elementen van *#theItem*.
* `$('#theItem').parents('ul')`\
Selecteer alle ul-tags die een ancestor van *#theItem* zijn.
* `$('#theItem').children()`\
Selecteer alle rechtstreekse children van *#theItem*. In dit voorbeeld bevat *#theItem* maar één child element, namelijk een ul-tag. Merk op dat we maar één niveau dalen. De onderliggende li-tags worden niet geselecteerd.
* `$('#theItem').children('li')`\
Hier wordt niets geselecteerd omdat er geen li-tag rechtstreeks onder *#theItem* staat. Alle onderliggende li-tags zitten immers nog een niveau dieper in een ul-tag. De li-tags zijn geen *children*, maar wel *descendants*.
* `$('#theItem').find('li')`\
Selecteer alle li-tags die een descendant van *#theItem* zijn.
{% hint style="danger" %}
`children()` zoekt enkel binnen childelementen. `find()` gaat daarentegen dieper en zoekt zowel naar childelementen als naar descendants.
{% endhint %}
## Next(), nextAll() en nextUntil()
Selecteer elementen op een gelijk niveau (siblings) die volgen na de hoofdselectie.
{% hint style="success" %}
★ Open **selectors/next.html**.
{% endhint %}
```javascript
$('#theItem').next().addClass('highLight'); // knop1
$('#theItem').nextAll().addClass('highLight'); // knop2
$('#theItem').nextUntil().addClass('highLight'); // knop3
$('#theItem').nextUntil('#end').addClass('highLight'); // knop4
```
* `$('#theItem').next()`\
Selecteer het eerstvolgende element uit de lijst.
* `$('#theItem').nextAll()`\
Selecteer alle volgende elementen uit de lijst. Let op: enkel elementen op gelijk niveau met *#theItem* worden geselecteerd.
* `$('#theItem').nextUntil()`\
Zonder parameter geven `nextAll()` en `nextUntil()` hetzelfde resultaat.
* `$('#theItem').nextUntil('#end')`\
Selecteer alle volgende elementen uit de lijst, maar stop net voor het element met id *#end*.
## Prev(), prevAll() en prevUntil()
Selecteer elementen op een gelijk niveau, voorafgaand aan de hoofdselectie.
{% hint style="success" %}
★ Open **selectors/prev.html**.
{% endhint %}
```javascript
$('#theItem').prev().addClass('highLight'); // knop1
$('#theItem').prevAll().addClass('highLight'); // knop2
$('#theItem').prevUntil().addClass('highLight'); // knop3
$('#theItem').prevUntil('#start').addClass('highLight'); // knop4
```
* `$('#theItem').prev()`\
Selecteer het voorgaande element uit de lijst.
* `$('#theItem').prevAll()`\
Selecteer alle voorgaande elementen uit de lijst.
* `$('#theItem').prevUntil()`\
Zonder parameter geven `prevAll()` en `prevUntil()` hetzelfde resultaat.
* `$('#theItem').prevUntil('#start')`\
Selecteer alle voorgaande elementen uit de lijst, maar stop net voor het element met id *#start*.
## Siblings()
Selecteer elementen, zowel voorafgaand als volgend, op een gelijk niveau met de hoofdselectie.
De hoofdselectie zelf is nooit inbegrepen.
{% hint style="success" %}
★ Open **selectors/siblings.html**.
{% endhint %}
```javascript
$('#theItem').siblings().addClass('highLight'); // knop1
$('#theItem').siblings('.grey').addClass('highLight'); // knop2
$('#theItem').siblings().not('.grey').addClass('highLight'); // knop3
```
* `$('#theItem').siblings()`\
Selecteer alle elementen uit de lijst.
* `$('#theItem').siblings('.grey')`\
Selecteer alle elementen met de class *.grey* uit de lijst.
* `$('#theItem').siblings().not('.grey')`\
Selecteer alle elementen zonder de class *.grey* uit de lijst.
## Closest()
Selecteer, vanaf de hoofdselectie naar de body-tag toe, het eerste element dat voldoet aan de voorwaarde. De subselectie gebeurt enkel in parent of ancestors, niet op siblings, children of descendants.
{% hint style="success" %}
★ Open **selectors/closest.html**.
{% endhint %}
```javascript
$('#theItem').closest('li').addClass('highLight'); // knop1
$('#theItem').closest('ul').addClass('highLight'); // knop2
$('#theItem').closest('.grey').addClass('highLight'); // knop3
```
* `$('#theItem').closest('li')`
Het id *#theItem* is zelf een li-tag, dus de subselectie is gelijk aan de hoofdselectie.
* `$('#theItem').closest('ul')`
Selecteer de eerste ul-tag net boven *#theItem*.
* `$('#theItem').closest('.grey')`
Er wordt niets geselecteerd. Er bevindt zich immers geen enkel element met class *.grey* op een ancestor element van *#theItem*.
## AddBack()
Voor de meeste hiërarchische selectors die we net hebben besproken, geldt dat de hoofdselectie zelf nooit is inbegrepen. Om de hoofdselectie ook toe te voegen, volstaat het `addBack()` achter de subselectie toe te voegen.
{% hint style="success" %}
★ Open **selectors/addBack.html**.\
★ Bekijk de broncode van de verschillende voorbeelden.
{% endhint %}
```javascript
// zonder hoofdselectie
$('#theItem').prevAll().addClass('highLight');
// met hoofdselectie
$('#theItem').prevAll().addBack().addClass('highLight');
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://1itf.gitbook.io/jquery/5-selectie-verfijnen-traversing/hierarchische-selectors.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.