Je veux juste envelopper un div avec une classe de diaporama toutes les 3 divs avec une classe pour la recherche audio.
Une erreur que j'ai eue était qu'il disait elem.parentElement n'est pas défini...
Donc cette partie fonctionne très bien...
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)];
Voici le problème : envelopper un div autour d'un nouveau tableau d'éléments groupés.
let wrap = (array) => {
array.forEach((elem) => {
let div = document.createElement('div');
div.classList.add('slide');
div.innerHTML = '';
elem.parentElement.insertBefore(div, elem);
div.appendChild(elem);
});
}
wrap(newArr);
Code complet :
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((elem) => {
let div = document.createElement('div');
div.classList.add('slide');
div.innerHTML = '';
elem.parentElement.insertBefore(div, elem);
div.appendChild(elem);
});
}
wrap(newArr);
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;
}
<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>
</body>
</html>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Je pense que vous compliquez un peu les choses en utilisant CSS pour chaque troisième div utilisant la classe
:nth-child将.search-audio的样式应用到.slide.Ce code est peut-être erroné, mais il ressemble à :
.slide:nth-child(3n) { /* move styles here from .search-audo */ }Voici quelques liens qui peuvent être utiles pour apprendre à les utiliser :
Le problème est
elem不是单个元素，它是由groupBlocks()创建的 3 个元素的数组。所以没有elem.parentElement.Utilisez
elem[0].parentElementpour obtenir le parent commun de tous les éléments. Parcourez-les ensuite pour ajouter chaque élément à un nouveau div.J'ai modifié
elem重命名为groupdans le code ci-dessous pour qu'il corresponde plus correctement à ce qu'il contient.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);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; }