本文将介绍如何使用 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 代码。
Wrapping Elements 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; } 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 { 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);
5. 总结
本文详细介绍了如何使用 JavaScript 将一组 DOM 元素按照每 3 个元素一组的方式，分别用一个 div 元素包裹起来。通过获取元素、分组元素以及动态创建和插入 DOM 节点，可以灵活地实现对 DOM 元素的分组和包裹。在实际开发中，可以根据具体需求调整分组数量和包裹元素的样式，以满足不同的应用场景。
以上就是将父元素包裹在每 3 个元素周围的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1518078.html
微信扫一扫 
支付宝扫一扫 
