Hiërarchische selectors

Zie: http://api.jquery.com/category/traversing/tree-traversal/

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.

★ Open selectors/parent.html.

Hiërarchische selectors

$('#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.

children() zoekt enkel binnen childelementen. find() gaat daarentegen dieper en zoekt zowel naar childelementen als naar descendants.

Next(), nextAll() en nextUntil()

Selecteer elementen op een gelijk niveau (siblings) die volgen na de hoofdselectie.

★ Open selectors/next.html.

$('#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.

★ Open selectors/prev.html.

$('#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.

★ Open selectors/siblings.html.

$('#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.

★ Open selectors/closest.html.

$('#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.

★ Open selectors/addBack.html. ★ Bekijk de broncode van de verschillende voorbeelden.

// zonder hoofdselectie
$('#theItem').prevAll().addClass('highLight');
// met hoofdselectie
$('#theItem').prevAll().addBack().addClass('highLight');