Чтобы достичь желаемой структуры, вам нужно пройтись по элементам и объединить те, которые имеют одинаковый класс "child". Вы можете сделать это с помощью JavaScript. Вот пример кода, который решает вашу задачу:
```javascript
document.addEventListener("DOMContentLoaded", function() {
const parent = document.querySelector('.parent');
const children = parent.querySelectorAll('.child');
let wrapper;
children.forEach((child, index) => {
// Если wrapper еще не создан, создаем его
if (!wrapper) {
wrapper = document.createElement('div');
wrapper.classList.add('wrapper');
// Вставляем новый wrapper в родительский элемент
parent.insertBefore(wrapper, child);
}
// Перемещаем текущий элемент 'child' в новый wrapper
wrapper.appendChild(child);
// Если следующий элемент не 'child', сбрасываем wrapper
if (index === children.length - 1 || !children[index + 1].isEqualNode(child)) {
wrapper = null; // Готовим wrapper к следующей группе
}
});
});
```
### Пояснения:
1. **Выбор родительского элемента**: Мы выбираем родительский элемент с классом "parent", а затем получаем все дочерние элементы с классом "child".
2. **Цикл по элементам**: Мы проходим по каждому дочернему элементу:
- Если `wrapper` еще не создан, создаем новый `div` с классом "wrapper" и вставляем его перед текущим элементом.
- Перемещаем текущий элемент 'child' в созданный `wrapper`.
- Если текущий элемент - последний в списке или за ним следует элемент, который не равен текущему, мы сбрасываем `wrapper` для следующей группы "child".
3. **Завершение**: После завершения цикла у вас будет структура, где все элементы с классом "child" обернуты в соответствующие элементы с классом "wrapper".
Этот код можно вставить в ваш HTML-файл непосредственно перед закрывающим тегом `</body>`. Просто убедитесь, что он выполняется после полной загрузки DOM.