我只是想用一类搜索音频围绕每 3 个 div 包装一个 div w 类幻灯片。
我遇到的一个错误是说 elem.parentElement 未定义...
所以部分效果很好...
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)];
问题就在这里——用一个 div 包裹新的分组元素数组。
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);
完整代码:
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>
问题是
elem
不是单个元素,它是由groupBlocks()
创建的3个元素的数组。所以没有elem.parentElement
.
使用
elem[0].parentElement
获取所有元素的公共父元素。然后遍历它们以将每个元素附加到新的 div。
我在下面的代码中将
elem
重命名为 group
,以更正确地匹配它包含的内容。
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);
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>
我认为你把它复杂化了一点,通过使用
:nth-child
将.search-audio
的样式应用于类.slide
的每个第三个div,可以只使用CSS。
这段代码可能是错误的,但类似于:
.slide:nth-child(3n) {
/* move styles here from .search-audo */
}
这里有一些链接可能对学习如何使用它们有用:
首先注意:类名不能是数字(
class="search-audio 1
)。
这里是一个片段,它使用 reducer 将元素分组为 3 个一组,然后将这些组包装在一个分组元素中。
// create groups of 3
const sliderGroups = [...document.querySelectorAll(`.search-audio`)]
.reduce((acc, el, i) => {
if (i && i%3 == 0) {
acc = [...acc, []];
}
acc[acc.length - 1] = acc[acc.length - 1].concat(el);
return acc;
}, [[]]);
// now you have an array of arrays
// with each 3 elements. Let's wrap
// those
wrap(sliderGroups);
function wrap (array) {
// a wrapper base Node
const wrapperElem = Object.assign(
document.createElement(`div`), {className: `slideGroup`});
const sliderCollection = document.querySelector(`.slider`);
array.forEach( elemGroup => {
// create a new wrapper Node from the base
const wrap = wrapperElem.cloneNode();
// append it to div.slider
sliderCollection.append(wrap);
// append *moves* the (life) elements of
// the current group to the wrap element
wrap.append(...elemGroup);
});
}
.search-audio:after {
content: "search-audio elem";
color: red;
margin-left: 6px;
}
.slideGroup:before {
content: "slide group";
color: green;
}
<div class="slider">
<div class="search-audio"></div>
<div class="search-audio"></div>
<div class="search-audio"></div>
<div class="search-audio"></div>
<div class="search-audio"></div>
<div class="search-audio"></div>
<div class="search-audio"></div>
<div class="search-audio"></div>
<div class="search-audio"></div>
<div class="search-audio]"></div>
<div class="search-audio]"></div>
<div class="search-audio"></div>
<div class="search-audio"></div>
<div class="search-audio"></div>
<div class="search-audio"></div>
<div class="search-audio"></div>
<div class="search-audio"></div>
<div class="search-audio"></div>
<div class="search-audio"></div>
<div class="search-audio"></div>
</div>