jQuery: Skillnaderna mellan Parent(), Parents() och Closest()

Du som läser denna artikel vet säkert redan att jQuery är ett JavaScript ramverk och att det har blivit väldigt populärt bland webbutvecklare de senaste åren. Sedan jag började använda jQuery för cirka 2 år sedan har det utvecklats i rask takt men framförallt upplever jag det som att jQuery har blivit något av en defacto standard i industrin. Som en sann anhängare så tycker jag detta är fantastiskt roligt då det bäddar för en ljus framtid med fortsatt utveckling av både ramverket och fantastiska plugins som underlättar min vardag.

Men denna artikel ska handla om jQuerys olika funktioner för att navigera upp genom DOM trädet och skillnaden mellan dessa. De tre funktioner som jag kommer att gå igenom är Parent(), Parents() och Closest().

Parent(selektor)

Om du har ett jQuery objekt som representerar ett antal DOM element och använder Parent() utan någon selektor så får du tillbaka ett nytt jQuery objekt som innehåller de direkta föräldrarna till dina tidigare DOM element. Om du skickar med en selektor så kommer föräldrarna att testas mot denna selektor och endast de element som matchar kommer att returneras.

Parent() kollar alltså enbart en nivå upp i DOM:en för att hitta något att returnera.

Parents(selektor)

Parents() kan man säga är den kraftfulle storebrodern till Parent() då den fungerar på precis samma sätt men med den avgörande skillnaden att den returnerar alla stamfäder till det eller de DOM element som den körs på. Precis som med Parent() så kommer alla DOM element att testas mot den eventuella selektorn och bara de element som matchar  returneras.

Parents() går alltså upp genom alla stamfäder i DOM trädet för att hitta element att returnera.

Closest(selektor)

Closest() kan bäst beskrivas som en hybrid mellan Parent() och Parents() då den fungerar lite som båda fast med en egenhet som är viktig att känna till.

Precis som Parents() så går Closest() upp för DOM trädet via alla stamfäder men stannar vid första DOM elementet som matchar selektorn och returnerar detta element. Så precis som Parent() så returnerar Closest() endast ett DOM element per DOM element i det ursprungliga jQuery objektet.

Den unika egenheten med Closest() är att den börjat titta på det DOM element som sökningen görs från, detta innebär att om det DOM element du söker från matchar selektorn så kommer du att få tillbaka samma element som du började med. Denna egenhet kan ge förvirrande resultat om man inte har koll.

Slutsatser

Tänkte avsluta med en personlig reflektion över dessa tre funktioner. Closest() är den funktion du kommer att ha störst användning av och det beror på att den gör det du oftast kommer att behöva. Jag tänker ofta att jag ska använda Parent() eftersom det är föräldern jag är ute efter, men av erfarenhet så vet jag att detta är en stor felkälla när man gör ändringar i html strukturen senare. Mer felsäkert är att använda Closest() och en selektor som berättar vad du letar efter, då kan du lägga till ett nytt element mellan det du söker från och det du söker efter utan att din kod slutar fungera.

Parents() har jag nog aldrig haft någon direkt användning av men kan tänka mig att vid nästlade strukturer så kan den tillsammans med en selektor vara användbar.

Lämna gärna en kommentar, fråga eller fundering i kommentarerna så ska jag försöka svara något vettigt.

Lämna en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.