Как посчитать сколько раз встречается блок с классом после определенного класса?

Question

У меня есть много блоков:

<div class="calendar">
<div class="day"></div>
<div class="day event"></div>
<div class="day"></div>
<div class="day selected"></div>
<div class="day selected"></div>
<div class="day event"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day selected"></div>
<div class="day selected"></div>
<div class="day event"></div>
<div class="day"></div>
</div>

Как посчитать кол-во блоков с тегами event которые идут только после блоков с классом selected? Именно сразу после. В указанном примере должно вернуть число 2.

Answer 1

См. CSS - селекторы, в JS они часто помогают)

let events = document.querySelectorAll('.selected + .event');

console.log( events.length );

<div class="day"></div>
<div class="day event"></div>
<div class="day"></div>
<div class="day selected"></div>
<div class="day selected"></div>
<div class="day event"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day selected"></div>
<div class="day selected"></div>
<div class="day event"></div>
<div class="day"></div>

Если бы его не существовало...

let selected = document.querySelectorAll('.selected');
let events = [];

selected.forEach(function(el){
  let next = el.nextElementSibling;
  if( next.classList.contains('event') ) {
    events.push( next );
  }
}); // И вариации через reduce / filter

console.log( events.length );

// let e = [...document.querySelectorAll('.event')];
// e = e.filter( ev => ev.previousElementSibling.classList.contains('selected') );

<div class="day"></div>
<div class="day event"></div>
<div class="day"></div>
<div class="day selected"></div>
<div class="day selected"></div>
<div class="day event"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day selected"></div>
<div class="day selected"></div>
<div class="day event"></div>
<div class="day"></div>

P.s. Можно свободно "ходить" во всех направлениях по DOM через:
• nextElementSibling
• previousElementSibling
• parentNode
• children

БЛОГ НА HUSL

Как посчитать сколько раз встречается блок с классом после определенного класса?

Ответы (1 шт):