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

Question

[nepster-web]

Собственно есть вот такой кусок кода:

<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>

Answer 1

[Anatoly Scherbakov]

Не уверен, хорошо ли это, ну вот такое решение: jsfiddle.net/5varj2Ly - см. в консоль.

В основе идея из stackoverflow.com/questions/7273668/split-a-long-a...

Comments

[nepster-web]

Спасибо, то что нужно, отлично заработало!