Nog een conceptvideo! Dit is "slechts een van die dingen" die u in jQuery moet begrijpen. Het is eigenlijk een beetje uniek voor jQuery, omdat andere populaire JavaScript-bibliotheken in het verleden het niet op deze manier hebben gedaan.
We hebben al behoorlijk wat selectors behandeld. U weet bijvoorbeeld al dat $("p")alle alinea's op een pagina worden geselecteerd. Niet alleen de eerste of een willekeurige, allemaal. U kunt zich gemakkelijk voorstellen dat er veel van deze op een pagina staan. Stel je nu voor wat er gebeurt als je het doet:
$("p").hide();Ze worden allemaal verborgen, toch? Rechtsaf. Niet de eerste of een willekeurige, allemaal. Die impliciete iteratie . Achter de schermen doorloopt jQuery automatisch de volledige set gevonden elementen en voert de methode uit die u erop hebt gekozen. We hoeven hiervoor niet letterlijk een lus te schrijven. Lijkt vrij voor de hand liggend als jQuery je inleidt tot JavaScript, maar voor veel bibliotheken in het verleden moest je zelf verzamelingen elementen doorlopen.
Als je wilt, kun je de lus nog steeds zelf schrijven. Dat zou er misschien zo uitzien, met behulp van jQuery-loopmethoden:
$("p").each(function() ( $(this).hide(); ));Dat is ongeveer hetzelfde. Niet per se, maar je zou kunnen. Dat is een expliciete iteratie .
Soms moet u expliciete iteratie uitvoeren. Kortom, als we toegang moeten hebben tot de waarde van thisen er iets speciaals mee moeten doen, hebben we onze eigen lusconstructie nodig om mee te werken.
Het voorbeeld in deze screencast was het tellen van de tekens in lijstitems en die aan het einde van de string toevoegen. Daar hebben we een expliciete iteratie voor nodig.
Zie de pen 4b53b9f55662d0d26339e18277500eee door Chris Coyier (@chriscoyier) op CodePen
We hebben hier de each () -methode van jQuery gebruikt, wat perfect is voor wat we nodig hebben. Een handig stukje dat het voor ons doet, is dat we een nul-geïndexeerde teller krijgen voor elke iteratie waartoe we indien nodig toegang hebben.
$(".there-are-three-of-me").each(function(i) ( console.log(i); )); // 0 // 1 // 2