本文介绍如何使用 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 中。
完整代码示例：
<!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 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; } const 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>
注意事项：
- 确保目标元素存在于 DOM 中，并且可以通过 querySelectorAll 正确获取。
- group[0].parentElement 确保 group 不为空，并且第一个元素存在父元素。
- 可以根据需要修改 slide 类的样式，以达到所需的视觉效果。
总结：
通过结合数组分割和 DOM 操作，我们可以使用 JavaScript 动态地调整页面结构，将一组元素按照指定数量用父元素包裹起来。这种技术可以用于创建轮播图、网格布局等复杂的 UI 组件。
