Как с помощью each jquery перебрать неделю календаря и найти необходимые события?

Question

[sergey]

Есть неделя календаря (структура формируется динамически) и необходимо пробежаться с помощью each и найти все event-item которые начинаются в одно время любого дня. Как это реализовать (нужна помощь, идея) Спасибо.

const events = $(this).find('.event-item');
let dataTimeStart = $(this).find('.cell').attr("data-time-start");

            if (dataTimeStart === dataTimeStart && events.length > 1) {
                console.log(events.length);
            }

<div class="days">
  <div class="day">
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 00:00">
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 01:00">
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 02:00">
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 03:00">
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 04:00">
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 05:00">
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 06:00">
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 07:00">
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 08:00">
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 09:00">
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 10:00">
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 11:00">
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 12:00">
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 13:00">
     <div class="event-item" style="border-color: #89D260; top: 0.0px; height: 100.0px; left: 0px; right: 0px"></div>
     <div class="event-item" style="border-color: #89D260; top: 0.0px; height: 100.0px; left: 0px; right: 0px"></div>
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 13:00"></div>
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 14:00">
     <div class="event-item" style="border-color: #89D260; top: 0.0px; height: 100.0px; left: 0px; right: 0px"></div>
   </div>
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 15:00"></div>
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 16:00"></div>
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 17:00">
     <div class="event-item" style="border-color: #89D260; top: 0.0px; height: 100.0px; left: 0px; right: 0px"></div>
     <div class="event-item" style="border-color: #89D260; top: 0.0px; height: 100.0px; left: 0px; right: 0px"></div>
   </div>
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 18:00"></div>
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 19:00"></div>
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 20:00"></div>
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 21:00"></div>
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 22:00"></div>
   <div class="cell" data-date="2020-08-30" data-time-start="August 30, 2020 23:00"></div>
</div>
    <div class="day">
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 00:00">
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 01:00">
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 02:00">
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 03:00">
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 04:00">
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 05:00">
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 06:00">
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 07:00">
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 08:00">
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 09:00">
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 10:00">
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 11:00">
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 12:00">
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 13:00">
     <div class="event-item" style="border-color: #89D260; top: 0.0px; height: 100.0px; left: 0px; right: 0px"></div>
     <div class="event-item" style="border-color: #89D260; top: 0.0px; height: 100.0px; left: 0px; right: 0px"></div>
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 13:00"></div>
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 14:00">
     <div class="event-item" style="border-color: #89D260; top: 0.0px; height: 100.0px; left: 0px; right: 0px"></div>
   </div>
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 15:00"></div>
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 16:00"></div>
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 17:00">
     <div class="event-item" style="border-color: #89D260; top: 0.0px; height: 100.0px; left: 0px; right: 0px"></div>
     <div class="event-item" style="border-color: #89D260; top: 0.0px; height: 100.0px; left: 0px; right: 0px"></div>
   </div>
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 18:00"></div>
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 19:00"></div>
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 20:00"></div>
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 21:00"></div>
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 22:00"></div>
   <div class="cell" data-date="2020-08-31" data-time-start="August 31, 2020 23:00"></div>
</div>
  <div class="day">.....</div>
  <div class="day">.....</div>
  <div class="day">.....</div>
  <div class="day">.....</div>
  <div class="day">.....</div>
</div>

https://jsfiddle.net/sergsagan/arb6zchn/66/

Comments

[Дима Долготер]

и что в сними сделать?

[sergey]

Дима Долготер, буду стилями воздействовать: в зависимости от количества найденных с помощью if () буду задавать им ширину (что бы помещались красиво)

[Дима Долготер]

Sagan, тебе надо
1) узнать текущую дату
2) узнать у каких блоков дата атрибут с такой же датой
3) навесить им класс?

[sergey]

Дима Долготер, вот с этим у меня и трабл (я jquery знаю слабо) но спасибо за совет!

[Дима Долготер]

Sagan, это вопрос был) если да то шас сделаем

[sergey]

Дима Долготер, буду очень благодарен!

[sergey]

Дима Долготер, да ибо по классу я смогу воздействовать на ширину этого ивента

Answer 1

[Дима Долготер]

ня кавай

Comments

[sergey]

так но почему-то если я добавляю в cell произвольные event то ячейка не перекрашивается (event-item динамически добавляются) и они могут быть и сегодня и завтра и в любой день недели (а в твоем решение все статично) ... но спасибо за идею

[Дима Долготер]

Sagan, какие евенты ты добавляешь?

[Дима Долготер]

Sagan, я смотрю на то, какая дата сегодня, у тебя в дата атрибутах дата не меняется так то оно и не подсвечивается

[sergey]

Дима Долготер, event-item это динамически добавляемые, то есть дата там может быть разной(в примере это с сайта просто взято) и количество их может быть разным

[sergey]

const events = $(this).find('.event-time');
let dataTimeStart = $(this).find('.cell').attr("data-time-start");

 if (dataTimeStart === dataTimeStart && events.length > 1) {
                console.log(events.length); //выводим колличество совпадающих ивентов
}

У меня идея такова была что брать с помощью if сравнивать начало event-item и проверять что бы их было больше 1 тогда присваивать им класс.
Но не получается реализовать.