Find siblings

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 siblings.

Hvad er siblings

Siblings betyder direkte oversat søskende.

Siblings er elementer som i DOM har samme hierakiske status som elementet der tages udgangspunkt i - siblings kan sidestilles med hinanden.

I HTML-eksemplet herunder har div'en 'child_1' samme status som 'child_2':

Eksempel
<div id="parent">
	<div id="child_1"></div> <!-- SIBLING_1 -->
	<div id="child_2"></div> <!-- SIBLING_2 -->
</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_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>

Siblings - søgninger både op og ned i DOM

.siblings ()

Vælger alle ligestillede siblings både før og efter det pågældende element

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

Vælger alle matchende selectorer både før og efter det pågældende element

$('#parent_4').siblings('#parent_2').css({'background' : 'green'});
children

Siblings - søgninger ned i DOM

.next ()

Vælger kun den førstkommende ligestillede sibling – en selector er overflødig

$('#parent_1').next().css({'background' : 'green'});
children
.nextUntil (selector)

Vælger alle ligestillede siblings uanset type ned til selectoren - selectoren inkluderes ikke

$('#parent_1').nextUntil('#parent_4').css({'background' : 'green'});
children
.nextAll (selector)

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

$('#parent_1').nextAll('#parent_4').css({'background' : 'green'});
children
.nextAll ()

Vælger alle ligestillede siblings ned til bunden af DOM - selectoren inkluderes ikke

$('#parent_1').nextAll().css({'background' : 'green'});
children

Siblings - søgninger op i DOM

.prev ()

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

$('#parent_4').prev().css({'background' : 'green'});
children
.prevUntil (selector)

Vælger alle ligestillede siblings uanset type op til selectoren - selectoren inkluderes ikke

$('#parent_4').prevUntil('#parent_1').css({'background' : 'green'});
children
.prevAll (selector)

Vælger alle matchende selectorer før det pågældende element

$('#parent_4').prevAll('#parent_1').css({'background' : 'green'});
children
.prevAll ()

Vælger alle ligestillede siblings op til toppen af DOM - selectoren inkluderes ikke

$('#parent_4').prevAll().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_3' med .prev() '#parent_4' inkluderes med .andSelf()

$('#parent_4').prev().andSelf().css({'background' : 'green'});
children