# 10: Изрично срещу неявна итерация - CSS-трикове

Anonim

Още едно концептуално видео! Това е „само едно от онези неща“, които трябва да разберете в jQuery. Всъщност е малко уникално за jQuery, тъй като други популярни библиотеки на JavaScript в миналото не са го правили по този начин.

Вече покрихме селектори доста. Например вече знаете, че $("p")ще изберете всички параграфи на дадена страница. Не само първата или някаква случайна, всички те. Можете лесно да си представите, че на една страница може да има много от тях. А сега си представете какво се случва, когато го направите:

$("p").hide();

Всички те се скриват, нали? Нали. Не първият или някакъв случаен, всички те. Тази имплицитна итерация . Зад кулисите jQuery автоматично прелиства целия набор от намерени елементи и изпълнява метода, който сте избрали върху тях. Не е нужно буквално да пишем сами цикъл, за да направим това. Изглежда доста очевидно, ако въвеждате JavaScript, е jQuery, но много библиотеки в миналото са изисквали да прелиствате колекции от елементи сами.

Ако искате, все пак можете сами да напишете цикъла. Това може би ще изглежда по следния начин, използвайки методите за циклиране jQuery:

$("p").each(function() ( $(this).hide(); ));

Това е почти същото. Не е задължително, но бихте могли. Това е изрична итерация .

Понякога трябва да направите изрична итерация. По принцип, ако трябва да осъществим достъп до стойността на thisи да направим нещо специално с него, ще ни трябва собствена конструкция на цикъл, с която да работим.

Примерът в тази скринкаст е преброяване на символите в елементите от списъка и добавяне на това в края на низа. За това ще ни трябва изрична итерация.

Вижте писалката 4b53b9f55662d0d26339e18277500eee от Chris Coyier (@chriscoyier) на CodePen

Тук използвахме метода jQuery всеки (), който е идеален за това, от което се нуждаем. Полезен бит, който прави за нас, ни дава нулево индексиран брояч всяка итерация, до която имаме достъп, ако е необходимо.

$(".there-are-three-of-me").each(function(i) ( console.log(i); )); // 0 // 1 // 2