Задать вопрос
nepster-web
@nepster-web
javascript

Как перебрать дерево элементов?

Собственно есть вот такой кусок кода:
<div id="project-screenshots">
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
</div>


Это слайдер. Где каждый див это отдельный слайд. Задача, в зависимсоити от расширения показывать определенное кол-во слайдов. Тоесть перед тем как отдать этот кусок кода слайдеру, мне нужно немного подшаманить с его структурой.

Подскажите пожалуйста, как можно оперативно и красиво используя jQuery собрать этот кусок в группы по любому кол-во элементов ?

Например, если слайдов 15 и указано число 4 в группе:
<div id="project-screenshots">
<div class="group-1">
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
</div>
<div class="group-2">
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
</div>
<div class="group-3">
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
</div>
<div class="group-4">
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
    <div><img src="images/projects/pr-1.png" alt="" /></div>
</div>
</div>
  • Вопрос задан
  • 2349 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Решения вопроса 1
Altaisoft
@Altaisoft
Не уверен, хорошо ли это, ну вот такое решение: jsfiddle.net/5varj2Ly - см. в консоль.

В основе идея из stackoverflow.com/questions/7273668/split-a-long-a...
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
Senior Frontend (JavaScript) разработчик
Vital Partners
от 350 000 до 420 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Надо найти рабочую связку ustd/uzs и рассказать как ее проворачивать
16 февр. 2025, в 17:15
1000 руб./за проект
Docker на развертывание Django + React
16 февр. 2025, в 15:54
2500 руб./за проект
Написание нейросети на Python или C++ для анализа ЭКГ сигналов
16 февр. 2025, в 11:06
15000 руб./за проект
Ещё заказы