Еще одно концептуальное видео! Это «всего лишь одна из тех вещей», которые вам нужно понять в jQuery. На самом деле это немного уникально для jQuery, потому что другие популярные библиотеки JavaScript в прошлом не делали этого таким образом.
Мы уже довольно много рассмотрели селекторы. Например, вы уже знаете, что $("p")выберет все абзацы на странице. Не только первый или какой-то случайный, но и все. Вы легко можете себе представить, что на странице их может быть много. А теперь представьте, что происходит, когда вы делаете:
$("p").hide();Все они прячутся, верно? Правильно. Не первый или какой-то случайный, все. Эта неявная итерация . За кулисами jQuery автоматически перебирает весь набор найденных элементов и запускает на них выбранный вами метод. Для этого нам буквально не нужно писать цикл. Кажется довольно очевидным, если вы знакомы с JavaScript, это jQuery, но многие библиотеки в прошлом требовали, чтобы вы самостоятельно перебирали коллекции элементов.
Если хотите, вы все равно можете написать цикл самостоятельно. Возможно, это выглядело бы так, используя методы цикла jQuery:
$("p").each(function() ( $(this).hide(); ));Это примерно то же самое. Не обязательно, но можно. Это явная итерация .
Иногда вам нужно сделать явную итерацию. По сути, если нам нужно получить доступ к значению thisи сделать с ним что-то особенное, нам понадобится наша собственная конструкция цикла для работы.
Пример в этом скринкасте подсчитывал символы в элементах списка и добавлял их в конец строки. Для этого нам понадобится явная итерация.
См. Перо 4b53b9f55662d0d26339e18277500eee Криса Койера (@chriscoyier) на CodePen
Здесь мы использовали метод jQuery each (), который идеально подходит для того, что нам нужно. Полезный бит, который он делает для нас, это дает нам счетчик с нулевым индексом для каждой итерации, к которой мы можем получить доступ при необходимости.
$(".there-are-three-of-me").each(function(i) ( console.log(i); )); // 0 // 1 // 2