Find nested elements

Introduktion

Ved hjælp af JQuery har jeg forskellige muligheder for at søge og vælge elementerne i DOM. Her på siden findes beskrivelser af de forskellige muligheder der findes, når elementerne der søges efter relaterer sig til hinanden som ancestors og descendants.

Hvad er nested elements

Nested elements er underordnede elementer, som er indeholdt i et overordet element - det overordnede element fungerer som en container og wrapper elle de nestede elementer.

Nested elements kan være enten "descendants" eller "ancestors" afhængig af placering.

Descendants

Descendants betyder direkte oversat efterkommere, og kan være children, grand-children etc.

Descendants er elementer som i DOM har en lavere hierakisk status end elementet der tages udgangspunkt i - en descendant omkranses af det pågældende element, hvilket også kaldes et "nested" element.

I HTML-eksemplet herunder er div'en 'child' en descendant af 'parent':

Eksempel
<div id="parent">
	<div id="child"></div> <!-- DETTE ER EN DESCENDANT -->
</div>

Ancestors

Ancestors betyder direkte oversat forfædre, og kan være parent, grand-parent etc.

Ancestors er elementer som i DOM har en højere hierakisk status end elementet der tages udgangspunkt i - en ancestor omkranser det pågældende element, hvilket også kaldes et "nested" element.

I HTML-eksemplet herunder har div'en 'parent' status som en ancestor for 'child':

Eksempel
<div id="parent"> <!-- DETTE ER EN ANCESTOR -->
	<div id="child"></div>
</div>

Samme eksempel i alle sidens beskrivelser

Alle beskrivelser herunder tager udgangspunkt i det samme HTML-eksempel:

HTML brugt i alle beskrivelser
<div id="parent_1">parent_1
<div id="parent_2">parent_2
	<div id="child">child
		<div id="grand_child_1">grand_child_1
			<div id="great_grand_child_1">great_grand_child_1</div>
			<div id="great_grand_child_2">great_grand_child_2</div>
		</div>
	</div>
</div>
<div id="parent_3">parent_3
<div id="parent_4">parent_4

Descendants - søgninger ned i DOM

.children()

Vælger alle children efter det pågældende element - grand-children og andre descendants vælges ikke.
En selector er overflødig

$('#grand_child_1').children().css({'background' : 'green'});
children
.find (selector)

Vælger alle matchende selectorer under det pågældende element

$('#parent_2').find('#great_grand_child_2').css({'background' : 'green'});
children
.find (all-elements)

Vælger alle descendants under det pågældende element

$('#child').find('*').css({'background' : 'green'});
children

Ancestors - søgninger op i DOM

.parent()

Vælger kun den foregående ancestor – en selector er overflødig

$('#great_grand_child_2').parent().css({'background' : 'green'});
children
.parents (selector)

Vælger alle matchende selectorer over det pågældende element 

$('#great_grand_child_2').parents('#parent_2').css({'background' : 'green'});
children
.parentsUntil (selector)

Vælger alle ancestors over det pågældende element og op til selectoren - selectoren inkluderes ikke

$('#great_grand_child_2').parentsUntil('#child').css({'background' : 'green'});
children
.closest (selector)

Vælger kun førstkommende selector over det pågældende element uanset hvor mange ancestors der ligge mellem - er der flere matchende selectorer højere op i DOM, bliver disse ikke valgt

$('#great_grand_child_2').closest('#parent_2').css({'background' : 'green'});
children

Tilvælg udgangspunktet for søgningen

.andSelf()

Jeg kan inkludere det pågældende element (udgangspunktet) ved at bruge .andSelf() - i eksemplet vælges 'parent_2' med .parent() '#child' inkluderes med .andSelf()

$('#child').parent().andSelf().css({'background' : 'green'});
children