JQuery - element-samlingar

Hitintills har vi använt jQuery genom att haka på metoder direkt efter en sökning i DOM. Metoderna har då förändrat de utvalada noderna direkt. Faktum är att man även kan lagra undan noderna som sökts ut i en variabel och så att man kan jobba med dem mer dynamiskt.

Läs ut och lagra ett nodelement

I grunden är detta mycket enkelt att spara undan resultatet ifrån en DOM-sökning. Det är bara att tilldela sökningen direkt till en variabel. Så här kan det se ut:

See the Pen yeboNY by Patrik Grip-Jansson (@PGJ) on CodePen.

Variabeln $styckeC kommer att innehålla ett objekt som har en referens som pekar på den utvalda DOM-noden. Denna kan vi sedan använda för att utföra diverse jQuery-metoder. Följande två metoder är alltså likvärdiga:

See the Pen EPmvwb by Patrik Grip-Jansson (@PGJ) on CodePen.

Med den stora skillnaden att vi kan använda $styckeC gång på gång utan att behöva göra en ny sökning i DOM. Vilket är mycket mer effektivt än att söka gång på gång.

Lagring och återanvändning ger prestanda

Faktum är att det ofta är en bra idé att leta reda på behövliga noder och sen lagra undan dem i en variabel. Då kan man komma åt dem när man behöver, utan att behöva göra en ny sökning. Sökningarna kan vara relativt kostsamma och det är bra att undvika att utföra dem i onödan. Detta går förstås inte att göra om det du ska leta fram är helt dynamiskt och förändras hela tiden. Men oftast söker man ju fram noder som i sig själv är statiska. Även om man ändrar innehållet i de lagrade noderna, så förändras inte "var" själva noden återfinns.

Namngivning

Du kanske märkte att variabeln vi jobbade med hade lite speciellt namn. Vi inledde dess namn med et t "$". Det är relativt vanligt att namnge variabler vars innehåll kommer ifrån en jQuery sökning på detta vis.

jQuery skapades för länge sen. Då saknades stöd för det mesta i webbläsarna. Det gör att vissa lösningar som jQuery bygger på inte är helt optimala i dagens förhållanden. För att kunna hålla reda på en samling av DOM-noder så var man tvungen att "bädda" in denna i en egen, jQuery-specifik datastruktur. När man söker ut DOM-noder utan att använda jQuery och använder webbläsarens inbyggda DOM-API får man tillbaka en annan typ av datastruktur - en NodeList. jQuerys datastruktur och NodeList är inte kompatibla och de innehåller bägge olika egenskaper samt olika metoder. Detta gör att det kan vara lite besvärligt om man blandar jQuery-kod och vanilla-kod. Det går alltid att omvandla ifrån den ena datastrukturen till den andra. Man får bara se till att hålla reda på vilken typ som lagrats i en variabel.

Ett sätt man kan komma runt detta är genom att använda en namngivningskonvention som indikerar vad en variabel har för innehåll. Vanligtvis namnger man därför variabler som innehåller jQuerys nodvariant med ett "$" i början av variabelnamnet, t.ex; $allStycken = $("p");

Att läsa ut flera nod-element

I föregående exempel tittade vi på hur man kunde läsa ut ett specifikt nodelement ifrån DOM. Vad händer om vår sökning matchar flera noder? Det blir faktiskt ingen större skillnad. Istället för att få ett enda värde, får vi en samling noder (ungefär som en array). Faktum är att när vi tog ut ett enda element, så fick vi även där en samling, bara det att samlingen enbart innehöll en enda nod.

Vi kan alltså gör som följer:

See the Pen xZdLWW by Patrik Grip-Jansson (@PGJ) on CodePen.

Här skapas en nodsamling som innehåller resultatet som erhålls när vi matchar alla element av typen p. När vi utför metoder med hjälp av denna variabel kommer alla noder som ingår i samlingen att påverkas. Återigen sker detta utan att vi behöver skriva någon loop.

Samlingar och each()

I vissa fall vill vi gå igenom varje element var för sig. Vi kanske inte vill att alla element i samlingen ska påverkas på samma sätt. Då kan vi skapa en explicit loop med hjälp av jQuerys each-metod. Den fungerar så här:

See the Pen EPmveQ by Patrik Grip-Jansson (@PGJ) on CodePen.

I exemplet söker vi först fram en nodsamling. Sedan utför vi en each-loop över dessa. Som inparameter tar each en funktion. Denna funktion utförs en gång för varje element som finns med i nodsamlingen.

Funktionen man skickar in till each kommer att få två inparameterar. Den första talar om vilket element i ordningen som hanteras. Den parametern är den DOM-nod på vilken vi vill jobba. Lägg märke till att detta inte är en jQuery-nod, utan en ren DOM-nod. Det gör att vi måste konvertera den till jQuery-varianten om vi vill använda jQuery-metoder på den. Det gör man med; $( element ), vilket skapar en jQuery-nod. Det är även därför vi namngav den element utan ett inledande "$".

Ovanstående exemplet skulle inte gått att genomföra utan att gå igenom varje element var för sig eftersom vi lägger till ett löpnummer för varje förändring.

Egentligen behöver man inte ha med den andra parametern i den funktion som each kallar på. Varje gång som loopen körs, sätts this till att vara kopplad till den nod som ska behandlas. Även detta är en "ren" DOM-nod och inte ett jQuery-objekt. Vi hade alltså kunnat skriva ovanstående exempel på detta vis.

See the Pen KVmvYW by Patrik Grip-Jansson (@PGJ) on CodePen.

Skillnaden är som du ser minimal. Möjligen är den första varianten att föredra, då det är lättare att se exakt vad det är man utför sina operationer på. Om du tittar runt på lite olika jQuery-exempel kommer du att se att bägge varianterna förekommer i ungefär samma utsträckning. Välj den du gillar bäst, men ha i åtanke att det går att göra på flera vis så att du inte blir förvånad när du läser någon annans kod.

Omvandling med $()

Som vi såg kunde $() inte bara användas för att utföra sökningar i DOM. I föregående exempel omvandlade den en "normal" DOM-nod till motsvarande jQuery-variant. Den kan även användas för att omvandla HTML-kod till en nod. Ett exempel på detta:

See the Pen ZQKJNa by Patrik Grip-Jansson (@PGJ) on CodePen.

$() "märker" att detta är HTML-kod och skapar