javascript - 包装多个项目js

Question

这里是一个为一张幻灯片制作包装器的脚本。如何正确制作，包装中的内容会得到三张幻灯片？

let wrappedSlides = Array.from(container.children).map(slide => {
            let slideWrap = document.createElement('div');
            slideWrap.classList.add('slides-flow__slide');
            slideWrap.appendChild(slide);
            return slideWrap;
        });

标签： javascriptforeachappendchild

Answer 1

我解决了问题

static createMarkup(container, transition = false) {

        let wrapper = document.createElement('div');
        wrapper.classList.add('slides-flow__wrap');
        if (transition) wrapper.style.transition = `transform ${transition}`;

        const slides = Array.from(container.children);
        let appendSlides = [];
        while(slides.length > 0) {
            appendSlides.push(slides.splice(0,3))
        }
        let wrappedSlides = appendSlides.map(slide => {
            let slideWrap = document.createElement('div');
            slideWrap.classList.add('slides-flow__slide');
            slide.forEach(el => slideWrap.appendChild(el));
            return slideWrap;
        });

        wrappedSlides.forEach(wrappedSlide => {
            wrapper.appendChild(wrappedSlide);
        });


        container.appendChild(wrapper);

        return {
            container,
            wrapper,
            slides: wrappedSlides
        }
    }