Как выбрать элементы в цикле по классу

@phpk · Регистрация: 15.05.2013

Студворк — интернет-сервис помощи студентам

Уже пол ночи сижу, не могу понять, как сделать.
Подскажите, как выбрать элементы по классу в цикле, допустим есть такие классы: a1, a2, a3, и элементы с этими классами находятся не по порядку, в разброс. И нужно выбрать каждый из них по очереди по номеру класса и добавлять анимацию, чтобы каждый элемент с классами a1,a2,a3 появлялся на экране в порядке, соответствующему его номеру класса.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="screen">
    <div class="anim a2"></div>
    <div class="wrap">
        <h2 class="anim a3">text</h2>
        <div class="sec2__content">
            <div class="s2-cont__center">
                <h3 class="anim a1">Center text</h3>
                <div class="s2__bottom">
                    <p>Bottom text</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS
1
2
3
4
5
6
.anim{
            opacity:0
        }
        .visible{
            opacity: 1;
        }

JavaScript
1
2
3
4
5
6
7
8
function animate(screen) {
        screen.find('.anim').each(function(i,el) {
            setTimeout(function() {
                $('.a'+(i+1)).addClass('visible');
            }, 1000);
        });
    }
    animate($('.screen'));

https://jsfiddle.net/rso8byzn/

Добавлено через 4 минуты

JavaScript
1
$('.a'+(i+1)).addClass('visible');

при этом тут может ещё подключаться в цепочке анимация, за методом addClass. Это наверно также может влиять на очерёдность выполнения анимации?

Добавлено через 8 часов 53 минуты
У кого какие идеи?

@AmateR62 · 11.05.2016, 16:20

Так пойдет?

JavaScript
1
2
3
4
5
6
7
8
9
10
function animate(screen) {
    var i = 0,
    max = screen.find('.anim').length + 1;
    
    var interval = setInterval(function() {
       $('.a'+i).addClass('visible');
       i++;
       if ( i>max ) { clearInterval(interval); }
    }, 1000);
  }

Песочница http://codepen.io/AmateR/pen/LNaePE

@phpk · 11.05.2016, 18:03 **[ТС]**

благодарю за пример.
Обьясните пожалуйста, почему же всё-таки не работает вышеприведённый пример?

JavaScript
1
2
3
4
5
6
7
8
function animate(screen) {
        screen.find('.anim').each(function(i,el) {
            setTimeout(function() {
                $('.a'+(i+1)).addClass('visible');
            }, 1000);
        });
    }
    animate($('.screen'));

ведь по идее в цикле идёт обращение к каждому элементу по очереди, и уже непосредственно для конкретного элемента вызывается метод setTimeout !

@AmateR62 · 11.05.2016, 18:59

Потому что setTimeout не блокирует выполнение цикла

@phpk · 11.05.2016, 22:15 **[ТС]**

Сообщение от AmateR62

Потому что setTimeout не блокирует выполнение цикла

а где в описании этих методов (setTimeout и setInterval) указывается, что setInterval блокирует выполнение цикла?

Смысл аргументов – тот же самый. Но, в отличие от setTimeout, он запускает выполнение функции не один раз, а регулярно повторяет её через указанный интервал времени. Остановить исполнение можно вызовом clearInterval(timerId).

Я такого что-то не видел, чтобы говорилось про блокировку цикла

@AmateR62 · 11.05.2016, 22:47

Потому что setTimeout не блокирует выполнение цикла

Сообщение от phpk

а где в описании этих методов (setTimeout и setInterval) указывается, что setInterval блокирует выполнение цикла?

А где вы в моем коде увидели цикл? =)
setInterval выполняет код каждые 1000мс Когда срабатывает условие i>max вызывается отмена setInterval.

Добавлено через 5 минут
Если вам нужен setTimeout, то надо использовать рекурсивный setTimeout:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function animate(screen) {
    var i = 1,
    max = screen.find('.anim').length;
        
    var timeout = setTimeout(function step() {
      $('.a'+i).animate({opacity: 1}, 1000);
      i++;
      if ( i<=max ) { timeout = setTimeout(step, 1000); }
      
    }, 1000);
  }

Тут обратный смысл - пока условие истина функция вызывает саму себя с интервалом 1000мс.

В вашем случае пока setTimeout "ждет" - цикл крутится, поэтому для глаза у вас показывается все одновременно

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@AmateR62 118 / 118 / 87 Регистрация: 24.02.2014 Сообщений: 404
	11.05.2016, 18:59
	Потому что setTimeout не блокирует выполнение цикла 1

Опции темы

Как выбрать элементы в цикле по классу

Решение