本文介绍如何使用 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 组件。
