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