jQuery show/hide med flera ID

Här är två lösningar som gör att du kan ha hur många sådana här som helst. Den första varianten har bäst prestanda, den andra varianten är lättast att förstå. Bytte till länk, men du kan byta tillbaka om du vill. Ta i så fall bort return false.

<a href="#" class="pusher">Show / Hide</a>
<div class="mover">
    Text
</div>

$(document).ready(function(){
	// Loopa igenom varje .pusher för prestanda
	$('div.pusher').each(function(){
		// Lagra this för prestanda
		var $this = $(this);
		$this.next().hide();
		$this.click(function(){
			$this.next().slideToggle();
			return false;
		});
	});
});

// Variant 2 - lättare att förstå men långsammare

$(document).ready(function(){
	$('div.mover').hide();
	$('a.pusher').click(function(){
		$(this).next().slideToggle();
		return false;
	});
});

Varför är version 2 långsammare?

<a href="#" class="pusher">Show / Hide</a>
<div class="mover">
    Text
</div>

$(document).ready(function(){
	// Loopa igenom varje .pusher för prestanda
	$('.pusher').each(function(){
		// Lagra this för prestanda
		var $this = $(this);
		$this.next().hide();
		$this.click(function(){
			$this.next().slideToggle();
			return false;
		});
	});
});

// Variant 2 - lättare att förstå men långsammare

$(document).ready(function(){
	$('.mover').hide();
	$('.pusher').click(function(){
		$(this).next().slideToggle();
		return false;
	});
});

För att den först letar igenom DOM efter klassen .mover och sen letar igenom hela DOM igen efter klassen .pusher, medan version 1 bara letar igenom DOM en gång, efter .pusher

Att söka igenom DOM efter klasser är riktigt långsamt. Att spara $(this) i en cache-variabel är inte alls viktigt i jämförelse, men man sparar några millisekunder på det också. Jag gjorde just ett test för att bevisa detta för mig själv, och då tog det 2,1 sek att köra testet med $(this) och 1,5 sek att köra testet med en cachad variabel $this

Så sant, så sant, men jag undrar om inte i moderna webläsare (som implementerar .querySelector och .querySelectorAll) ändå är snabba på att leta upp även klasser (jag gjorde en snabb koll genom jQuery sourcen och det verkar som om den använder dessa native metoder om de finns). Men det är bra att vara på den säkra sidan (och tänka på de äldre webbläsarna)!

Det är en klar prestandaförbättring, att skapa ett nytt jQuery objekt ($(this)) varje gång det ska användas är klart dyrt.

Det är bara typ 5-10 % av besökarnas webbläsare som klarar querySelector så det är ganska odugligt ännu. jQuery använder Sizzle som CSS3-motor, och Sizzle är ju inte direkt känt för att vara snabbt... det är stabilt, men långt ifrån snabbast. Att selektera klasser med jQuery är ganska snabbt i Fx, Chrome etc. men testa IE... att 1000 gånger selektera 1000 st divar med $('div.klass') i IE8 tar ca 9,6 sekunder. Jämför med samma operation i Chrome som tar ca 0,16 sekunder (ca 1 s i Fx). Selekterar man $('div') i IE8 tar det ca 1,45 sekunder. Detsamma tar ca 0,12 sekunder i Chrome (ca 0,5 s i Fx).

Det är viktigt att titta på prestanda i Fx också, 1 s är en helt oacceptabel laddningstid jämfört med 160 ms, och det var i Fx 3.6 med jQ 1.4. Jag vet inte om jQ använder querySelector/All i Fx för i så fall är har Mozilla gjort en riktigt långsam native-funktion där, iaf jämfört med Chrome.

När vi ändå delar med oss av jQuery snippets så vill jag bidraga med min variant:

$(document).ready(function() {

	/*
		ända .showorhide till en annan klass eller
		matchning du vill använda som klickare
	*/
	
	$('.showorhide').live('click', function()
	{
			
		/*
		hämta elementet direct efter det
		klickade och göm eller visa detta
		*/
	
		var nextTarget = $(this).next();
		
		/*
		Här anger 1000 duration, alltså ska
		animationen ta 1000 milisekunder
		*/
	
		$(nextTarget).slideToggle(1000);
		
		/*
		för att inte få oönskad effekt om
		en länk används för klicket.
		*/	
		return false;
	});

});

Detta fungerar på det viset att vi tänker oss två DIV:ar:

<div class="showorhide">Göm visa innehåll under.</div>
<div class="whatEver">Innehåll.... bla bla bla bla...</div>

Kanske inte mångsidigt men bör fylla den funktion du behöver eftersom du kan langa in hur många klickare och visa/göm divar du vill på sidan och alla kommer bara öppna den div direkt efter den du klickar på. eller stänga.