Разбить элементы в группы по три штуки

@drmedus · Регистрация: 13.12.2012

Студворк — интернет-сервис помощи студентам

Доброго времени. Задача предельно проста - разбить заранее неизвестное количество элементов по три штуки, т.е. есть такое

HTML5
1
2
3
4
5
6
7
8
9
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
....

а нужно сделать из этого такое

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div>
<img src="" />
<img src="" />
<img src="" />
</div>
 
<div>
<img src="" />
<img src="" />
<img src="" />
</div>
 
<div>
<img src="" />
<img src="" />
<div>
....

помогите пожалуйста.

@Roman_rc · 11.03.2014, 14:38

Вот набросал функцию:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
<div id ="main_block">
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
</div>
<a href ="javascript:test(3)">Start</a>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
#main_block {
    width:100px;
    height:100px;
    background-color: grey;
    }
 
div {
    margin:5px;
    width:100px;
    height:50px;
    background-color:darkgreen;
    }

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    function test(controlNumber) {
 
        var mainDiv = document.getElementById("main_block"),
             children = mainDiv.children,
             lastElement = (children.length) - 1,
             i = 0;
 
        var tag_name = children[0].tagName || children[0].textContent;
        if (tag_name !== "IMG") {
            return false;
        }
 
        while (i <= lastElement) {
            var newDiv = document.createElement('div');
            while (i <= (controlNumber - 1)) {
                var tag_name = children[0].tagName || children[0].textContent;
                if (tag_name !== "IMG") {
                    break;
                }
                newDiv.appendChild(children[0]);
                i++;
            };
            mainDiv.appendChild(newDiv);
            controlNumber += controlNumber;
            newDiv = undefined;
        };
        return true;
    }

Новые блоги и статьи Все статьи Все блоги /
AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .
Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .

Опции темы

Разбить элементы в группы по три штуки

Решение