JQuery - element-samlingar - Versionshistorik

PGJ den 31 oktober 2020 kl. 12.29

2020-10-31T12:29:13Z

← Äldre version		Versionen från 31 oktober 2020 kl. 12.29
Rad 52:		Rad 52:
	* Den andra är det DOM-element som finns på den positionen i samlingen. Lägg märke till att detta inte är en jQuery-element, utan ett "vanligt" DOM-element. Det gör att vi måste konvertera det till jQuery-varianten om vi vill använda jQuery-metoder på det. Det gör man med; <code>$( element )</code>, vilket skapar en jQuery-element.		* Den andra är det DOM-element som finns på den positionen i samlingen. Lägg märke till att detta inte är en jQuery-element, utan ett "vanligt" DOM-element. Det gör att vi måste konvertera det till jQuery-varianten om vi vill använda jQuery-metoder på det. Det gör man med; <code>$( element )</code>, vilket skapar en jQuery-element.

	Eftersom <code>element</code>-variabeln inte är ett rent jQuery-element, så valde vi att att namnge variabeln, utan ett inledande "<code>$</code>"-tecken.		Eftersom <code>element</code>-variabeln inte är ett rent jQuery-element, så valde vi att att namnge variabeln, utan ett inledande "<code>$</code>"-tecken.

	Eftersom vi lägger till ett löpnummer i varje elements innehåll, så skulle ovanstående exemplet inte gått att genomföra utan att köra en loop som går igenom varje element.		Eftersom vi lägger till ett löpnummer i varje elements innehåll, så skulle ovanstående exemplet inte gått att genomföra utan att köra en loop som går igenom varje element.

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

PGJ: /* Omvandling med $() */

2019-01-12T20:54:33Z

Omvandling med $()

← Äldre version		Versionen från 12 januari 2019 kl. 20.54
Rad 66:		Rad 66:
	Som vi såg kunde <code>$()</code> inte bara användas för att utföra sökningar i DOM. I föregående exempel omvandlade den ett "normal" element till motsvarande jQuery-variant. Den kan även användas för att omvandla HTML-kod till ett element. Ett exempel på detta:		Som vi såg kunde <code>$()</code> inte bara användas för att utföra sökningar i DOM. I föregående exempel omvandlade den ett "normal" element till motsvarande jQuery-variant. Den kan även användas för att omvandla HTML-kod till ett element. Ett exempel på detta:

	<codepen pen="ZQKJNa" tab="js" height="400">		<codepen pen="ZQKJNa" tab="js,result" height="400">
	</codepen>		</codepen>

PGJ: /* Samlingar och each() */

2019-01-12T20:54:19Z

Samlingar och each()

← Äldre version		Versionen från 12 januari 2019 kl. 20.54
Rad 58:		Rad 58:
	Egentligen behöver man inte ha med den andra parametern i den funktion som <code>each</code> kallar på. Varje gång som loopen körs, sätts <code>this</code> till att vara kopplad till det element som ska behandlas. Även detta är ett "normal" element och inte ett jQuery-element. Vi hade alltså kunnat skriva ovanstående exempel på detta vis.		Egentligen behöver man inte ha med den andra parametern i den funktion som <code>each</code> kallar på. Varje gång som loopen körs, sätts <code>this</code> till att vara kopplad till det element som ska behandlas. Även detta är ett "normal" element och inte ett jQuery-element. Vi hade alltså kunnat skriva ovanstående exempel på detta vis.

	<codepen pen="KVmvYW" tab="js" height="400">		<codepen pen="KVmvYW" tab="js,result" height="400">
	</codepen>		</codepen>

PGJ: /* Samlingar och each() */

2019-01-12T20:53:50Z

Samlingar och each()

← Äldre version		Versionen från 12 januari 2019 kl. 20.53
Rad 43:		Rad 43:
	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 <code>each</code>-metod. Den fungerar så här:		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 <code>each</code>-metod. Den fungerar så här:

	<codepen pen="EPmveQ" tab="js" height="400">		<codepen pen="EPmveQ" tab="js,results" height="400">
	</codepen>		</codepen>

Rad 52:		Rad 52:
	* Den andra är det DOM-element som finns på den positionen i samlingen. Lägg märke till att detta inte är en jQuery-element, utan ett "vanligt" DOM-element. Det gör att vi måste konvertera det till jQuery-varianten om vi vill använda jQuery-metoder på det. Det gör man med; <code>$( element )</code>, vilket skapar en jQuery-element.		* Den andra är det DOM-element som finns på den positionen i samlingen. Lägg märke till att detta inte är en jQuery-element, utan ett "vanligt" DOM-element. Det gör att vi måste konvertera det till jQuery-varianten om vi vill använda jQuery-metoder på det. Det gör man med; <code>$( element )</code>, vilket skapar en jQuery-element.

	~~Efterom~~ <code>element</code>-variabeln inte är ett rent jQuery-element, så valde vi att att namnge variabeln, utan ett inledande "<code>$</code>"-tecken.		Eftersom <code>element</code>-variabeln inte är ett rent jQuery-element, så valde vi att att namnge variabeln, utan ett inledande "<code>$</code>"-tecken.

	Eftersom vi lägger till ett löpnummer i varje elements innehåll, så skulle ovanstående exemplet inte gått att genomföra utan att köra en loop som går igenom varje element.		Eftersom vi lägger till ett löpnummer i varje elements innehåll, så skulle ovanstående exemplet inte gått att genomföra utan att köra en loop som går igenom varje element.

PGJ: /* Att läsa ut flera element */

2019-01-12T20:53:26Z

Att läsa ut flera element

← Äldre version		Versionen från 12 januari 2019 kl. 20.53
Rad 27:		Rad 27:
	Vi kan alltså göra som följer:		Vi kan alltså göra som följer:

	<codepen pen="beVWBP" tab="js" height="400">		<codepen pen="beVWBP" tab="js,result" height="400">
	</codepen>		</codepen>

PGJ: /* Läs ut och lagra ett element */

2019-01-12T20:53:09Z

Läs ut och lagra ett element

← Äldre version		Versionen från 12 januari 2019 kl. 20.53
Rad 4:		Rad 4:
	I grunden är det 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:		I grunden är det 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:

	<codepen pen="yeboNY" tab="js" height="400">		<codepen pen="yeboNY" tab="js,result" height="400">
	</codepen>		</codepen>

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

	<codepen pen="EPmvwb" tab="js" height="400">		<codepen pen="EPmvwb" tab="js,result" height="400">
	</codepen>		</codepen>

PGJ: /* Namngivning */

2017-02-08T13:31:51Z

Namngivning

← Äldre version		Versionen från 8 februari 2017 kl. 13.31
Rad 20:		Rad 20:

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

	== Att läsa ut flera element ==		== Att läsa ut flera element ==

PGJ: /* Samlingar och each() */

2017-01-29T16:56:22Z

Samlingar och each()

← Äldre version		Versionen från 29 januari 2017 kl. 16.56
Rad 48:		Rad 48:
	I exemplet söker vi först fram en samling element. Sedan utför vi en <code>each</code>-loop över dessa. Som inparameter tar <code>each</code> en funktion. Denna funktion utförs en gång för varje element som finns med i samlingen.		I exemplet söker vi först fram en samling element. Sedan utför vi en <code>each</code>-loop över dessa. Som inparameter tar <code>each</code> en funktion. Denna funktion utförs en gång för varje element som finns med i samlingen.

	Funktionen man skickar med i <code>each</code> kan ta två inparameterar. Den första talar om vilket element i ordningen som hanteras. Lägg märke till att detta inte är en jQuery-element, utan ett ~~rent~~ "vanligt" element. Det gör att vi måste konvertera det till jQuery-varianten om vi vill använda jQuery-metoder på det. Det gör man med; <code>$( element )</code>, vilket skapar en jQuery-element.		Funktionen man skickar med i <code>each</code> kan ta två inparameterar:
			* Den första talar om vilket element i ordningen som hanteras och den börjar räkna ifrån <code>0</code>.
			* Den andra är det DOM-element som finns på den positionen i samlingen. Lägg märke till att detta inte är en jQuery-element, utan ett "vanligt" DOM-element. Det gör att vi måste konvertera det till jQuery-varianten om vi vill använda jQuery-metoder på det. Det gör man med; <code>$( element )</code>, vilket skapar en jQuery-element.

	Efterom <code>element</code>-variabeln inte är ett rent jQuery-element, så valde vi att att namnge variabeln, utan ett inledande "<code>$</code>"-tecken.		Efterom <code>element</code>-variabeln inte är ett rent jQuery-element, så valde vi att att namnge variabeln, utan ett inledande "<code>$</code>"-tecken.

	~~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~~.		Eftersom vi lägger till ett löpnummer i varje elements innehåll, så skulle ovanstående exemplet inte gått att genomföra utan att köra en loop som går igenom varje element.

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

PGJ: /* Samlingar och each() */

2016-06-07T08:50:58Z

Samlingar och each()

← Äldre version		Versionen från 7 juni 2016 kl. 08.50
Rad 48:		Rad 48:
	I exemplet söker vi först fram en samling element. Sedan utför vi en <code>each</code>-loop över dessa. Som inparameter tar <code>each</code> en funktion. Denna funktion utförs en gång för varje element som finns med i samlingen.		I exemplet söker vi först fram en samling element. Sedan utför vi en <code>each</code>-loop över dessa. Som inparameter tar <code>each</code> en funktion. Denna funktion utförs en gång för varje element som finns med i samlingen.

	Funktionen man skickar med i <code>each</code> kan ta två inparameterar. Den första talar om vilket element i ordningen som hanteras. Lägg märke till att detta inte är en jQuery-element, utan ett rent "vanligt" element. Det gör att vi måste konvertera ~~den~~ till jQuery-varianten om vi vill använda jQuery-metoder på det. Det gör man med; <code>$( element )</code>, vilket skapar en jQuery-element. ~~Det är även därför vi valde att namnge~~ ~~variabeln~~ <code>element</code>, utan ett inledande "<code>$</code>".		Funktionen man skickar med i <code>each</code> kan ta två inparameterar. Den första talar om vilket element i ordningen som hanteras. Lägg märke till att detta inte är en jQuery-element, utan ett rent "vanligt" element. Det gör att vi måste konvertera det till jQuery-varianten om vi vill använda jQuery-metoder på det. Det gör man med; <code>$( element )</code>, vilket skapar en jQuery-element.

			Efterom <code>element</code>-variabeln inte är ett rent jQuery-element, så valde vi att att namnge variabeln, utan ett inledande "<code>$</code>"-tecken.

	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.		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.
Rad 57:		Rad 59:
	</codepen>		</codepen>

	Skillnaden är, som du ser, rätt så 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å.		Skillnaden är, som du ser, rätt så 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 lika stor utsträckning. Välj den du gillar bäst. Ha dock 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.

	Om du tittar runt på lite olika jQuery-exempel kommer du att se att bägge varianterna förekommer i ungefär lika stor utsträckning. Välj den du gillar bäst. Ha dock 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 <code>$()</code> ==		== Omvandling med <code>$()</code> ==

PGJ: /* Att läsa ut flera element */

2016-06-07T08:47:33Z

Att läsa ut flera element

← Äldre version		Versionen från 7 juni 2016 kl. 08.47
Rad 27:		Rad 27:
	Vi kan alltså göra som följer:		Vi kan alltså göra som följer:

	<codepen pen="~~xZdLWW~~" tab="js" height="400">		<codepen pen="beVWBP" tab="js" height="400">
	</codepen>		</codepen>