本文介绍如何使用 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 包裹起来。
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 中。
完整代码示例：
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 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);
注意事项：
确保目标元素存在于 DOM 中，并且可以通过 querySelectorAll 正确获取。group[0].parentElement 确保 group 不为空，并且第一个元素存在父元素。可以根据需要修改 slide 类的样式，以达到所需的视觉效果。
总结：
通过结合数组分割和 DOM 操作，我们可以使用 JavaScript 动态地调整页面结构，将一组元素按照指定数量用父元素包裹起来。这种技术可以用于创建轮播图、网格布局等复杂的 UI 组件。
以上就是使用 JavaScript 将父元素包裹在每三个子元素周围的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1518082.html
微信扫一扫 
支付宝扫一扫 
