当前位置：首页 > 文章列表 > 文章 > 前端 > 每3个子元素包裹成组的JS实现方法

每3个子元素包裹成组的JS实现方法

2025-09-05 23:34:53 0浏览收藏

本文详细介绍了使用JavaScript将父元素中的子元素进行分组并包裹的处理方法，重点讲解了如何使用JavaScript实现将一组DOM元素按照每3个元素一组的方式，分别用一个`div`元素包裹起来。文章深入浅出地讲解了获取DOM元素、分组元素、动态创建DOM节点以及插入节点等关键步骤，并提供了完整的代码示例，方便开发者理解和应用。通过学习本文，开发者可以掌握灵活地对DOM元素进行分组和包裹的技巧，从而更好地应对前端开发中常见的布局和样式控制需求，例如实现轮播图等效果。

将父元素包裹在每 3 个元素周围

本文将介绍如何使用 JavaScript 将父元素包裹在每 3 个元素周围。摘要如下： "本文介绍了如何使用 JavaScript 将一组 DOM 元素，按照每 3 个元素一组的方式，分别用一个 div 元素包裹起来。文章详细讲解了如何获取元素、分组元素以及动态创建和插入 DOM 节点，并提供了完整的代码示例，帮助开发者理解和应用该技术。"

在前端开发中，经常会遇到需要对 DOM 元素进行分组并添加包裹元素的需求。例如，为了实现轮播图效果，可能需要将一组元素按照一定的数量进行分组，并用一个 div 元素包裹起来，方便进行统一的样式控制和动画处理。本文将详细介绍如何使用 JavaScript 实现这一功能。

1. 获取目标元素

首先，需要获取需要进行分组和包裹的 DOM 元素。可以使用 document.querySelectorAll() 方法来获取所有具有特定 class 的元素。

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

上述代码中，document.querySelectorAll('.search-audio') 获取了所有 class 为 search-audio 的元素，并将结果存储在 audioBlocks 中。然后，使用 Array.from() 方法将 audioBlocks 转换为数组 audioBlockArr，方便后续进行数组操作。

2. 分组元素

接下来，需要将获取到的元素数组按照每 3 个元素一组的方式进行分组。可以自定义一个 groupBlocks() 函数来实现这一功能。

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

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

  return groups;
}

newArr = [...groupBlocks(audioBlockArr, 3)];

groupBlocks() 函数接收两个参数：arr 为需要分组的数组，len 为每组元素的数量。该函数使用 while 循环遍历数组，每次从数组中截取 len 个元素，并将截取到的元素作为一个子数组添加到 groups 数组中。最后，函数返回 groups 数组，其中包含了所有分组后的子数组。

3. 包裹元素

现在，已经将元素按照每 3 个一组的方式进行了分组。接下来，需要为每个分组创建一个新的 div 元素，并将分组中的元素添加到该 div 元素中。

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 为包含所有分组的数组。该函数使用 forEach() 方法遍历数组中的每个分组。对于每个分组，函数执行以下操作：

创建一个新的 div 元素，并设置其 class 为 slide。
使用 insertBefore() 方法将新创建的 div 元素插入到当前分组的第一个元素之前。group[0].parentElement 获取了分组中第一个元素的父元素，group[0] 作为参照节点。
使用 forEach() 方法遍历当前分组中的每个元素，并将每个元素添加到新创建的 div 元素中。

注意: 原始代码中elem.parentElement会报错，因为elem是包含3个元素的数组，不是DOM元素，所以没有parentElement属性。应该使用group[0].parentElement来获取包含所有元素的父级元素。

4. 完整代码示例

以下是完整的代码示例，包含了 HTML、CSS 和 JavaScript 代码。

<!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 slider = document.querySelector('.slider');
    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;
    }

    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>

5. 总结

本文详细介绍了如何使用 JavaScript 将一组 DOM 元素按照每 3 个元素一组的方式，分别用一个 div 元素包裹起来。通过获取元素、分组元素以及动态创建和插入 DOM 节点，可以灵活地实现对 DOM 元素的分组和包裹。在实际开发中，可以根据具体需求调整分组数量和包裹元素的样式，以满足不同的应用场景。

以上就是《每3个子元素包裹成组的JS实现方法》的详细内容，更多关于的资料请关注golang学习网公众号！