Filtrering - jQuery - Björns studiewebb

Innehåll

På denna sida beskrivs hur man kan filtrerar element i ett jQuery-objekt ytterligare m.h.a. metoder.

Inledning

Efter att man sökt fram element med selektorer så kan man filtrera element ytterligare i jQuery-objekt m.h.a. av ett antal metoder. De flesta filtreringsmetoder, liksom många av jQuery-metoderna, returnerar jQuery-objektet manipulerat, d.v.s. med filter applicerat. Detta innebär att metoder kan "länkas" (s.k. chaining) - en metod kan anropas direkt efter en annan.

Exempel

I exempel nedan så väljs först alla punkter i listor ut för att sen filtreras på dem som har klassen red. Stil för alla element i den filtrerade listan ändras sen till röd (text-)färg.

$("li").filter(".red").css("color", "blue");

Vid anrop av många filtreringsmetoder så placeras den nuvarande samlingen av element på stacken, d.v.s. sparas undan, och kan återställas genom att anropa metoden .end() (se exempel i nästa avsnitt).

Strukturerande av kod

JavaScript:s syntax är mycket "anpassningsbar", vilket gör att vi kan skriva koden mer läsbar. Bl.a. så kan man infoga radbrytningar och indrag där man i andra språk inte får dela på koden.

Det är dock praktiskt att därför alltid använda semikolon för att avsluta satser så att koden är lättare att tolka, men även så att den fungerar korrekt om man komprimerar koden.

Exempel

I exempel nedan så har satsen delats upp på tre rader (i hoppet om att det gör det mer lättläst :-)). Först väljs alla punkter i listor ut (rad 1), sen filtreras de på klassen röd för att ändra stilen till blå (text-)färg (som ovan) och sist så tas filtrering bort genom att anropa metoden .end() (rad 2). Därefter filtreras på klassen blue och ändrar (text-)färg till röd (rad 3). Satsen avslutas med semikolon. Effekten bör bli att röda rader ändrar färg till blå, och tvärtom.

$("li")
  .filter(".red").css("color", "blue").end()
  .filter(".blue").css("color", "red");

$-funktion eller filtreringsmetoder?

Några av filtreringsmetoderna överlappar med selektorer, d.v.s. man kan i vissa fall välja på att använda selektorer eller filtreringsmetoder. Ibland kan det vara lättare eller mer effektivt att använda filtreringsmetoder istället för bara selektorer (se officiell jQuery-dokumentation).

Om man vill manipulera samma samling av element på flera sätt så kan man använda $-funktionen för att välja ut elementen och sen filtrera resultatet för manipulation. Exempel på detta visas i föregående avsnitt.

Till början på sida

Metoder

Filtreringsmetoder används för att filtrera redan utvalda element. Index som används som argument till metoder ska vara 0-baserade.

Till många av de metoder nedan, som har en parameter arg, kan bl.a. skickas selektorsträng, funktion, DOM-element och/eller annat jQuery-objekt.

Filtreringsmetoder
Metod	Element som filtreras ut
`.eq(n)`	Element som har index n
`.filter(arg)`	Element som t.ex. matchar selektorer i argumentet arg
`.first()`	Första elementet
`.has(arg)`	Element som har ättlingar som t.ex. matchar selektorer i argumentet arg
`.is(arg)`	true om minst ett element t.ex. matchar selektorer i argumentet arg
`.last()`	Sista elementet
`.map(func)`	Element som funktion i argument returnerar
`.not(arg)`	Tar bort element som inte t.ex. matchar selektorer i argumentet arg
`.slice(n[, m])`	Element med början på index n, till ev. index m

Exempel

I exempel nedan så väljs först alla punkter i listor och sen filtreras element nummer 3 ut (då vektorer i JavaScript är 0-baserade).

$("li").eq(2); //Listelement 3
if($(".rubrik").is(h1)) ...; //Om element är H1

Till början på sida

Referenser

Nedan finns några böcker och webbsidor/-platser som jag använt för att skapa denna underwebb.

Filtering (jQuery-dokumentation).