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

Очевидно, что элементы выстроятся в несколько рядов.
Возможно ли подсчитать скриптом сколько элементов в каждом ряду?
  • Вопрос задан
  • 196 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега JavaScript
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
  ),
  []
);
Ответ написан
Комментировать
MrDecoy
@MrDecoy Куратор тега JavaScript
Верставший фронтендер
Нажмите "посчитать" - увидите последовательность построчно сколько элементов в строке.
Поменяйте ширину row чтоб поменялось распределение, снова нажмите посчитать - увидите другой результат.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
  1. Взять первый элемент.
  2. Найти расстояние от его верхней границы до границы контейнера
  3. Перебирать все последующие элементы, пока расстояние до контейнера не изменится
Ответ написан
Комментировать
@Codebaker
Всё умею, всё могу!
Выставьте контейнеру не класс, а id, тогда:

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

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

Похожие вопросы
22 нояб. 2024, в 06:06
1500 руб./в час
22 нояб. 2024, в 06:04
1 руб./за проект
22 нояб. 2024, в 03:54
1500 руб./за проект