Snabb och enkel filtrering med jQuery

I den här veckans screencast, Vi lär oss hur du implementerar snabb och smutsig filtrering utan databas. Genom att använda några klasser och en touch av jQuery kan vi implementera ett trevligt litet system väldigt snabbt.

Översikt

Bara igår blev jag frågad hur jag kunde skapa den enkla sorteringsfunktionen som finns på Vault-sidan i min blogg. Sanningen blev det gjort av brådska. Även om jag så småningom kommer att köra allt via en databas och sortera det på så sätt, för närvarande behövde jag ett snabbt och smutsigt sätt att göra det med JavaScript. Jag ska visa dig vad jag gjorde.

20 minuters video handledning

Andra visningsalternativ

• Ladda ner videon
• iTunes Version

Den sista jQuery

Uppdaterad lite från videon.

 var ulOptions = '

• Allt
• PHP
• CSS
• JavaScript
• html

'; var $ links = $ ('# links'); $ links.before (ulOptions) .children ('li') .addClass ('alla') .filter ('li: udda') .addClass ('udda'); $ ('# alternativ li a'). klicka (funktion () var $ this = $ (detta), typ = $ this.attr ('class'); $ links.children ('li') .removeClass odd ') .hide () .filter ('. '+ typ) .show () .filter (': udda ') .addClass (' udda '); return false;);

Uppdatering: Smal liten bugg

"SFdude" hittade en bugg där, om du klickar på samma objekt två gånger, försvinner hela listan! Lyckligtvis kunde jag snabbt bestämma problemet. Problemet var att efter det första klicket tillämpade vi en klass av "utvald" till ankaretiketten. Det var det som orsakade hikan. För nu - det hade två klasser som inte skulle motsvara någonting! Resten är att ta bort dessa två linjer:

 $ ('# alternativ li a'). removeClass ('selected'); $ This.addClass ( 'vald');

Sanningsenligt - de var onödiga. Vi kan lika enkelt använda fokuseringsväljaren i vårt stilark för att uppnå detta. :)

 a: fokus font-weight: bold; 

Och det gör det. Jag har uppdaterat demo och källkod. Tack vare SFdude för att hitta den lilla lilla buggen.

Så vad är dina tankar? Håller inte med den här metoden? Finns det ett bättre sätt att göra det - utan databas? Låt mig veta!

Tack, Screencast.com!

... för att tillhandahålla värd för dessa video tutorials.

• Följ oss på Twitter, eller prenumerera på Nettuts + RSS-flödet för fler dagliga webbutvecklingstoppar och artiklar.