同一页面两个Swiper实例出现e.children不可迭代错误的解决求助

问题现象 #

在页面中创建视频滑块和评论滑块两个Swiper实例时，控制台抛出以下错误：

• 警告：jQuery.Deferred exception: e.children is not iterable TypeError: e.children is not iterable
• 错误：Uncaught TypeError: e.children is not iterable

自身代码未定义变量e，无法理解该变量的指向；尝试将导航、滚动条改为专属类名（如.review-swiper-button-next）后问题仍未解决，console.log(e.children)也无输出。

代码示例 #

function calculateMoveAmount(screenWidth, move) {
    if (screenWidth > 1280) {
        return move.largeScreenMoveAmount;
    } else if (screenWidth > 768) {
        return move.mediumScreenMoveAmount;
    } else if (screenWidth > 375) {
        return move.smallScreenMoveAmount;
    } else {
        return move.extraSmallScreenMoveAmount;
    }
}

function initializeSwiper(swiperInstance, isNext, move) {
    var currentPosition = 0;

    swiperInstance.customSlideMove = function () {
        var moveAmount = calculateMoveAmount($(window).width(), move);

        if (isNext) {
            currentPosition -= moveAmount;
            currentPosition = Math.max(currentPosition, -((swiperInstance.slides.length - 1) * moveAmount));
        } else {
            currentPosition += moveAmount;
            currentPosition = Math.min(currentPosition, 0);
        }

        swiperInstance.wrapperEl.style.transform = 'translate3d(' + currentPosition + 'px, 0px, 0px)';
        console.log(moveAmount, currentPosition);
    };
}

var isVideoSwiper = $('.video__swiper');
var videoMove = {
    largeScreenMoveAmount: 680,
    mediumScreenMoveAmount: 600,
    smallScreenMoveAmount: 520,
    extraSmallScreenMoveAmount: 300
};
var videoSwiper = new Swiper(isVideoSwiper, {
    spaceBetween: 20,
    direction: 'horizontal',
    loop: false,
    centeredSlides: false,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    scrollbar: {
        el: '.swiper-scrollbar',
        draggable: true,
    },
    on: {
        init: function () {
            initializeSwiper(this, true, videoMove);

            $('.swiper-button-next').on('click', function () {
                videoSwiper.customSlideMove();
            });

            $('.swiper-button-prev').on('click', function () {
                videoSwiper.customSlideMove();
            });
        }
    }
});

var isReviewSwiper = $('.review__swiper');
var reviewMove = {
    largeScreenMoveAmount: 390,
    mediumScreenMoveAmount: 320,
    smallScreenMoveAmount: 240,
    extraSmallScreenMoveAmount: 220
};
var reviewSwiper = new Swiper(isReviewSwiper, {
    spaceBetween: 30,
    direction: 'horizontal',
    loop: false,
    centeredSlides: false,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    scrollbar: {
        el: '.swiper-scrollbar',
        draggable: true,
    },
    on: {
        init: function () {
            initializeSwiper(this, false, reviewMove);

            $('.swiper-button-next').on('click', function () {
                reviewSwiper.customSlideMove();
            });

            $('.swiper-button-prev').on('click', function () {
                reviewSwiper.customSlideMove();
            });
        }
    }
});

问题根源与修复方案 #

1. 核心错误：Swiper初始化参数类型错误 #

Swiper构造函数要求传入原生DOM元素或选择器字符串，但你传入的是jQuery包装后的对象（$('.video__swiper')），导致Swiper内部处理DOM时无法正确获取子元素，抛出e.children is not iterable（这里的e是Swiper内部处理的异常对象）。

修复方式：

• 方式一：将jQuery对象转为原生DOM元素：

var videoSwiper = new Swiper(isVideoSwiper[0], {...})
var reviewSwiper = new Swiper(isReviewSwiper[0], {...})

• 方式二：直接传入选择器字符串：

var videoSwiper = new Swiper('.video__swiper', {...})
var reviewSwiper = new Swiper('.review__swiper', {...})

2. 导航/滚动条元素冲突 #

两个Swiper实例共用相同的导航、滚动条类名，即使修改了专属类名，初始化配置里的nextEl/prevEl/scrollbar.el未同步更新，会导致事件绑定混乱。

修复方式：
给每个Swiper的导航、滚动条设置专属类名，并同步修改配置：

// 视频Swiper配置
navigation: {
    nextEl: '.video-swiper-next',
    prevEl: '.video-swiper-prev',
},
scrollbar: {
    el: '.video-swiper-scrollbar',
    draggable: true,
},

// 评论Swiper配置
navigation: {
    nextEl: '.review-swiper-next',
    prevEl: '.review-swiper-prev',
},
scrollbar: {
    el: '.review-swiper-scrollbar',
    draggable: true,
},

3. 自定义滑动逻辑的方向错误 #

原代码中customSlideMove函数依赖初始化时传入的isNext参数，点击prev/next按钮时调用同一个方法，会导致滑动方向错误。

修复方式：
修改customSlideMove函数，让它接收方向参数，绑定事件时传入对应方向：

// 修改initializeSwiper中的customSlideMove
swiperInstance.customSlideMove = function (isNext) {
    var moveAmount = calculateMoveAmount($(window).width(), move);

    if (isNext) {
        currentPosition -= moveAmount;
        currentPosition = Math.max(currentPosition, -((swiperInstance.slides.length - 1) * moveAmount));
    } else {
        currentPosition += moveAmount;
        currentPosition = Math.min(currentPosition, 0);
    }

    swiperInstance.wrapperEl.style.transform = 'translate3d(' + currentPosition + 'px, 0px, 0px)';
    console.log(moveAmount, currentPosition);
};

// 视频Swiper的事件绑定
$('.video-swiper-next').on('click', function () {
    videoSwiper.customSlideMove(true);
});
$('.video-swiper-prev').on('click', function () {
    videoSwiper.customSlideMove(false);
});

// 评论Swiper的事件绑定
$('.review-swiper-next').on('click', function () {
    reviewSwiper.customSlideMove(true);
});
$('.review-swiper-prev').on('click', function () {
    reviewSwiper.customSlideMove(false);
});

内容的提问来源于stack exchange，提问作者claudiatjuhhh