@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%;
}

Очевидно, что элементы выстроятся в несколько рядов.
Возможно ли подсчитать скриптом сколько элементов в каждом ряду?
  • Вопрос задан
  • 114 просмотров
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега JavaScript
Верставший фронтендер
Нажмите "посчитать" - увидите последовательность построчно сколько элементов в строке.
Поменяйте ширину row чтоб поменялось распределение, снова нажмите посчитать - увидите другой результат.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
0xD34F
@0xD34F Куратор тега JavaScript
const count = Array
  .from(document.querySelectorAll('.col'))
  .reduce((acc, { offsetTop: n }, i) => (
    (i && acc[acc.length - 1][0] === n) || acc.push([ n, 0 ]),
    acc[acc.length - 1][1]++,
    acc
  ), [])
  .map(n => n[1]);
Ответ написан
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
  1. Взять первый элемент.
  2. Найти расстояние от его верхней границы до границы контейнера
  3. Перебирать все последующие элементы, пока расстояние до контейнера не изменится
Ответ написан
@Codebaker
Всё умею, всё могу!
Выставьте контейнеру не класс, а id, тогда:

var count = $("#container row").length;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы