Implisitt iterasjon og chaining

Innhold

Når en kjører en funksjon, kjøres den på hele datasettet, hvis ikke definert til ikke å gjøre det.

	// Alle
	$('div').css('background-color','#cccccc');
	// Div nr 2
	$('div').eq(1).css('background-color','#cccccc');

Egentlig det samme som:

	$('div').each(function () {
	 $(this).css('background-color','#cccccc')
	});

Må ikke blandes med $.each(). Denne brukes på arrays og objekter, mens overstående er for DOM-objekter.

	var map = { 
  		'test': 'yep dette er en test', 
  		'test2': 'og enda en test!' 
	}; 
	$.each(map, function(key, value) { 
 	 	alert(key + ': ' + value); 
	});

Chaining

	$('#content h1')
		.css({'background-color':'#000000','color':'#FFFFFF'})
		.attr('title', 'Dette er en tittel!')
		.text('Heyhey!');

jQuery refererer alltid til det første elementet i en chain, hvis en ikke hopper ut av det, eks med parent(), find() e.l.

Hva vil skje her?
$("
inner
") .appendTo("
outer
") .appendTo("body");

Oppgave

Hva blir rett i koden over?

Breaking the chain

Du kan endre objekt underveis når du manipulerer objekter, f.eks. med find(). For å gå returnere og manipulere originalobjektet, kan en bruke den "destruktive" metoden end()

$('.messageBox').find('.inner')
                  .css('background', 'red')
                .end()
                .fadeOut(2000);

Apropos fadeOut(), litt om selectorene :hidden og visible.

Et element er :hidden hvis parenten f.eks. har display: none.. jQuery sjekker om elementet tar opp plass - dv shar offsetWidth = 0;

Oppgave

Bruk find() til å finne første 'p' innenfor den nå synlige artikkelen, og skriv ut tekstnoden til konsollen.

Legg til en klikk-handler som på klikk endrer section-taggen som denne p'en er innenfor, til gul bakgrunnsfarge.