Возможно ли посчитать количеств элементов в одном ряду?

Question

[denism300]

К примеру, есть макет

<div class="container">
    <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>

.container {
    width: 800px;
    display: block;
}
.row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.col {
    flex: 0 1 25%;
}

Очевидно, что элементы выстроятся в несколько рядов.
Возможно ли подсчитать скриптом сколько элементов в каждом ряду?

Answer 1

[0xD34F]

const count = Array.prototype.reduce.call(
  document.querySelectorAll('.col'),
  (acc, n, i, a) => (
    n.offsetTop !== a[i - 1]?.offsetTop && acc.push(0),
    acc[acc.length - 1]++,
    acc
  ),
  []
);

Answer 2

[Вадим]

Нажмите "посчитать" - увидите последовательность построчно сколько элементов в строке.
Поменяйте ширину row чтоб поменялось распределение, снова нажмите посчитать - увидите другой результат.

Answer 3

[Alex]

1. Взять первый элемент.
   
2. Найти расстояние от его верхней границы до границы контейнера
   
3. Перебирать все последующие элементы, пока расстояние до контейнера не изменится
   

Answer 4

[Codebaker]

Выставьте контейнеру не класс, а id, тогда:

var count = $("#container row").length;