使用 JavaScript 将父元素包裹在每三个子元素周围

本文介绍如何使用 JavaScript 将一组 DOM 元素，按照每三个元素一组的方式，用一个指定的父元素包裹起来。通过使用 querySelectorAll 获取目标元素，并结合数组分割和 DOM 操作，实现对页面结构的动态调整。本文提供详细的代码示例和步骤说明，帮助开发者理解和应用此技术。

首先，我们需要获取需要包裹的元素。假设我们有一组具有 search-audio 类的 div 元素，我们希望每三个元素用一个 slide 类的 div 包裹起来。

const audioBlocks = document.querySelectorAll('.search-audio');
const audioBlockArr = Array.from(audioBlocks);

这段代码使用 document.querySelectorAll 获取所有 class 为 search-audio 的元素，并将 NodeList 转换为数组 audioBlockArr，方便后续操作。

接下来，我们需要编写一个函数，将数组分割成指定长度的子数组。

立即学习“Java免费学习笔记（深入）”；

function groupBlocks(arr, len) {
    let groups = [],
        i = 0,
        n = arr.length;

    while (i < n) {
        groups.push(arr.slice(i, i += len));
    }

    return groups;
}

const newArr = groupBlocks(audioBlockArr, 3);

groupBlocks 函数接收一个数组 arr 和一个长度 len，将 arr 分割成多个长度为 len 的子数组，并将这些子数组放入一个新数组 groups 中返回。 newArr 变量存储了分割后的数组。

现在，我们需要编写一个函数，将这些子数组中的元素用一个 div 包裹起来。

快写红薯通AI

快写红薯通AI，专为小红书而生的AI写作工具

下载

let wrap = (array) => {
    array.forEach((group) => {
        let div = document.createElement('div');
        div.classList.add('slide');
        div.innerHTML = '';

        group[0].parentElement.insertBefore(div, group[0]);
        group.forEach(elem => div.appendChild(elem));
    });
}

wrap(newArr);

wrap 函数接收一个数组 array，遍历数组中的每个子数组 group。对于每个 group，创建一个新的 div 元素，并添加 slide 类。然后，将这个新的 div 插入到 group 中第一个元素的父元素之前，并将 group 中的所有元素添加到这个新的 div 中。

完整代码示例：

    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
        
11
        
12
        
13
        
14
        
15
        
16
        
17
        
18
        
19
        
20
    

    

注意事项：

• 确保目标元素存在于 DOM 中，并且可以通过 querySelectorAll 正确获取。
• group[0].parentElement 确保 group 不为空，并且第一个元素存在父元素。
• 可以根据需要修改 slide 类的样式，以达到所需的视觉效果。

总结：

通过结合数组分割和 DOM 操作，我们可以使用 JavaScript 动态地调整页面结构，将一组元素按照指定数量用父元素包裹起来。这种技术可以用于创建轮播图、网格布局等复杂的 UI 组件。