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

@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 "ждет" - цикл крутится, поэтому для глаза у вас показывается все одновременно

Новые блоги и статьи Все статьи Все блоги /
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20%	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .

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

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

Решение