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

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

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

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 代码。




  Wrapping Elements

5. 总结

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

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