Hiërarchische selectors

Zie: http://api.jquery.com/category/selectors/hierarchy-selectors/

Hiërarchische selectors kan u best vergelijken met een stamboom. Bekijk in onderstaande code hoe de tags in elkaar genest zijn.

<table class="table">
    <thead>
        <tr>
            <th>Opleiding:</th>
            <th>Datum:</th>
            <th>Lokaal:</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dreamweaver</td>
            <td>15 december</td>
            <td>PC1</td>
        </tr>
    </tbody>
</table>

De hiërarchische selectors zijn:

• Parent en child Parent en child zijn geneste tags op het eerste niveau. De thead-tag en de tbody-tag staan rechtstreeks onder de table-tag en gedragen zich in een parent-child relatie. table is een parent van thead of thead is een child van table.

• Siblings Siblings (broers of zussen) zijn elementen die op gelijk niveau staan. De drie td-tags binnen een tr-tag zijn siblings van elkaar.

• Ancestor (voorouder) Een ancestor kan de parent zijn, maar ook de parent van de parent, of nog een verdere relatie. th heeft als parent tr. th heeft als ancestor tr, maar ook thead en table.

• Descendant (nakomeling) Een descendant kan een child zijn, maar ook een child van een child of nog een verdere relatie. table heeft als child thead en tbody. table heeft als descendant thead, tbody, maar ook tr, th en td.

★ Controleer onderstaande selecties op het oefenbestand. ★ Je mag enkel het deel tussen de aanhalingstekens invullen. ★ Bijvoorbeeld: table tr en niet $('table tr').

Descendant selector: $('ancestor descendant')

$('table tr')    // alle tr-tags binnen een tabel
$('table td')    // alle td-tags binnen een tabel
$('table td a')  // enkel de links in td-tags van een tabel
$('ul *')        // alle tags binnen een ul-tag

Child selector: $('parent > child')

$('table > tbody')       // de tbody-tags die een child zijn van een tabel
$('table > td')          // de td-tags die een child zijn van een tabel (*)
$('table > tbody > tr')  // alle tabelrijen die een child zijn van tbody-tags die op hun beurt een child zijn van table

(*) Merk op dat in ons voorbeeld geen enkele td-tag rechtstreeks onder de table-tag staat. Er wordt dus niets geselecteerd!

Sibling selector (alle volgende) : $('prev ~ sibling')

$('thead ~ tbody')   // alle tbody-tags die op hetzelfde niveau staan van en volgen op een thead-tag
$('li ~ li')         // alle li-tags die op hetzelfde niveau staan van en volgen op een li-tag
$('h3 ~ p')          // alle p-tags die op hetzelfde niveau staan van en volgen op een h3-tag

Sibling selector (dadelijk aangrenzende): $('prev + next')

$('thead + tbody')   // alle tbody-tags die op hetzelfde niveau staan van en DADELIJK volgen op een thead-tag.
$('li + li')         // alle li-tags die op hetzelfde niveau staan van en DADELIJK volgen op een li-tag
$('h3 + p')          // alle p-tags die op hetzelfde niveau staan van en DADELIJK volgen op een h3-tag

In het laatste voorbeeld worden paragraaf2 en paragraaf3 niet geselecteerd.