本文将介绍如何使用 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 元素的分组和包裹。在实际开发中，可以根据具体需求调整分组数量和包裹元素的样式，以满足不同的应用场景。
