Find ensartede elementer

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 er af samme type - det kan være alle 'div'er på siden, en samling links med 'a' eller en søgning blandt punktopstillinger med 'li'.

Det samme eksempel bruges i alle sidens beskrivelser, men beskrivelserne gælder uanset om de ensartede elementer er siblings eller nested elements.

Alle beskrivelser herunder tager udgangspunkt i det samme HTML-eksempel - der er indsat '.select' på grund af eksemplet med 'filter':

HTML brugt i alle beskrivelser
<ul>
	<li>punkt_1</li>
	<li class="select">punkt_2</li>
	<li>punkt_3</li>
</ul>
	<p>paragraph</p>
<ul>
	<li>punkt_4</li>
	<li>punkt_5</li>
	<li class="select">punkt_6</li>
</ul>

Ensartede elementer - .first() og .last()

.first ()

Vælger det af de matchende elementer som er placeret højest i DOM - uanset hvilke elementer der ligger i mellem.
Accepterer ikke en selector

$('li').first().css({'background' : 'green'});
children
.last ()

Vælger det af de matchende elementer som er placeret lavest i DOM - uanset hvilke elementer der ligger i mellem.
Accepterer ikke en selector

$('li').last().css({'background' : 'green'});
children

Ensartede elementer - even og odd

('selector : even')

Vælger de matchende elementer alle som kan tælles med et ulige nummer startende med det første match

$('li:even').css({'background' : 'green'});
children
('selector : odd')

Vælger de matchende elementer alle som kan tælles med et lige nummer startende med det første match

$('li:odd').css({'background' : 'green'});
children

Ensartede elementer - eq og nth

('selector') .eq (nummer)

Vælger det af de matchende elementer som svarer til det indsatte tal startende fra topppen af DOM
'eq' tæller fra '0' så det 1. element = 0 - det 2. element = 1 osv

$('li').eq(0).css({'background' : 'green'});
children
('selector : nth-of-type (nummer)')

Vælger de matchende elementer som svarer til det indsatte tal uanset hvilke elementer der ligger mellem når der tælles fra topppen af hver ancestor.
'nth-of-type' genstarter tællingen hver gang en ancestor afsluttes.

$('li:nth-of-type(3)').css({'background' : 'green'});
children
('selector : nth-child (nummer)')

Vælger kun de matchende elementer som ligger placeret på pladsen svarende til det indsatte tal når der tælles fra topppen af hver ancestor. - er der ikke IKKE et match på tallets plads vælges altså intet.
'nth-child' genstarter tællingen hver gang en ancestor afsluttes.

$('li:nth-child(3)').css({'background' : 'green'});
children
(selector) .filter (selector)

Vælger blandt de ensrtede elementer alle matchende selectoren - i dette eksempel alle li med '.selected' (se HTML for eksemplerne øverst i artiklen).

$('li').filter('.select').css({'background' : 'green'});
filter
>

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