使用 JavaScript 将父元素包裹在每三个子元素周围-js教程-PHP中文网

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

聖光之護

发布： 2025-08-28 19:36:01

原创

826人浏览过

使用 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助手

223

查看详情

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

完整代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>Wrapping Elements</title>
    <style>
        body {
            font-family: system-ui;
            background: #f06d06;
            color: white;
            text-align: center;
        }

        .search-audio {
            height: 12rem;
            width: 12rem;
            background: rgb(255, 153, 0);
            margin: .5rem;
            display: inline-block;
        }

        .slide {
            background-color: #555;
        }
    </style>
</head>
<body>
    <div class="slider">
        <div class="search-audio">1</div>
        <div class="search-audio">2</div>
        <div class="search-audio">3</div>
        <div class="search-audio">4</div>
        <div class="search-audio">5</div>
        <div class="search-audio">6</div>
        <div class="search-audio">7</div>
        <div class="search-audio">8</div>
        <div class="search-audio">9</div>
        <div class="search-audio">10</div>
        <div class="search-audio">11</div>
        <div class="search-audio">12</div>
        <div class="search-audio">13</div>
        <div class="search-audio">14</div>
        <div class="search-audio">15</div>
        <div class="search-audio">16</div>
        <div class="search-audio">17</div>
        <div class="search-audio">18</div>
        <div class="search-audio">19</div>
        <div class="search-audio">20</div>
    </div>

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

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

        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);
    </script>
</body>
</html>

登录后复制

注意事项：