Как добавить класс к ближайшему рейсу?

Question

[dsgnfox]

Есть такая страница 26060.ru/r
Не могу понять как к ближайшему рейсу добавить класс, чтобы визуально его выделить.
Может подскажите решение.

upd. Сравнивать нужно с временем по МСК и добавлять класс к ближайшему из будущих рейсов.

Comments

[Алексей]

А как определить который из них ближайший?
Сравнением каких характеристик?

[dsgnfox]

Алексей Например, сейчас 14:38. Есть рейсы в 14:30 и 14:45. Класс нужно добавить на рейс 14:45.

[Алексей]

dsgnfox, берем текущее время потом смотрим в расписание и находим ближайшее в заданном интервале время и вешаем таким объектам класс. Чтобы не перебирать все теги ищем внутри "route-body__row".

[Destell]

Получаете текущее время в нужном формате, сравниваете с тем, что у вас прописано в блоках на сайте, блоку с подходящим значением присваиваете класс.

[dsgnfox]

Destell а на примере с кодом можно?

Answer 1

[Destell]

codepen
Детально не тестировал, можете сами поменять время и посмотреть, как переключается.

Comments

[dsgnfox]

Destell ты мой спаситель! Спасибо большое :)

[dsgnfox]

Destell небольшой вопрос.
А как сделать, чтобы проверка происходила отдельно для каждого data-timebox?
У меня их несколько на странице.

[Destell]

dsgnfox, обновил код

Answer 2

[Валентин]

Как по мне, то такое лучше делать на стороне сервера, брать текущую дату и сравнивать с временем рейса, и добавлять сразу класс , например .next_flight и все

Comments

[Максим Тимофеев]

Если на клиенте js framework - то как раз лучше на клиенте, а сервер реализует REST и просто отдает данные. Так что Вы не правы. Ваше "лучше" сильно зависит от целого ряда факторов.