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

@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-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

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

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

Решение