Endnu en konceptvideo! Dette er "bare en af de ting", du skal forstå i jQuery. Det er faktisk lidt unikt for jQuery, idet andre populære JavaScript-biblioteker tidligere ikke har gjort det på denne måde.
Vi har allerede dækket vælgere ganske lidt. For eksempel ved du allerede, at $("p")der vælges alle afsnit på en side. Ikke kun den første eller en tilfældig, alle sammen. Du kan let forestille dig, at der kan være mange af disse på en side. Forestil dig nu, hvad der sker, når du gør:
$("p").hide();Alle bliver skjult, ikke? Ret. Ikke den første eller nogle tilfældige, alle sammen. Den implicitte iteration . Bag kulisserne løber jQuery automatisk gennem hele det sæt af elementer, den har fundet, og kører den metode, du har valgt, på dem. Vi behøver ikke bogstaveligt talt selv at skrive en løkke for at gøre dette. Virker ret åbenlyst, hvis du er introduktion til JavaScript, er jQuery, men mange biblioteker har tidligere krævet, at du selv slår over samlinger af elementer.
Hvis du vil, kan du stadig skrive sløjfen selv. Det vil måske se sådan ud ved hjælp af jQuery looping-metoder:
$("p").each(function() ( $(this).hide(); ));Det er næsten det samme. Ikke nødvendigvis, men du kunne. Det er eksplicit iteration .
Nogle gange er du nødt til at udføre eksplicit iteration. Dybest set, hvis vi har brug for at få adgang til værdien af thisog gøre noget specielt med det, har vi brug for vores egen loopkonstruktion til at arbejde med.
Eksemplet i denne screencast var at tælle tegnene i listeelementer og tilføje det til slutningen af strengen. Vi har brug for eksplicit iteration til det.
Se pennen 4b53b9f55662d0d26339e18277500eee af Chris Coyier (@chriscoyier) på CodePen
Vi brugte jQuerys hver () metode her, som er perfekt til det, vi har brug for. En nyttig bit, det gør for os, er at give os en nul-indekseret tæller for hver iteration, vi kan få adgang til, hvis det er nødvendigt.
$(".there-are-three-of-me").each(function(i) ( console.log(i); )); // 0 // 1 // 2