swiper：一个页面多个轮播，互不影响

最近要实现一个在一个页面展示多个轮播图的功能，

html代码如下：

<ul>
    <loop $actorList $k $v/>

        <li class="list<=$k+1/>">
            <div class="swiper-container">
                //图片列表
                <div class="swiper-wrapper">
                    <php $images = json_decode($v.ImageAttach,true) /></php/>
                    <loop $images $key $img/>
                        <a href="javascript:void(0)" class="swiper-slide">
                            <img src="<=$img/>"/>
                        </a>
                    </loop/>
                </div>
                //轮播的分页器
                <div class="swiper-pagination swiper-pagination<=$k+1/>"></div>
                //上一页和下一页
                <div class="arrow-left">
                    <span class="arrow-icon"></span>
                </div>
                <div class="arrow-right">
                    <span class="arrow-icon"></span>
                </div>
            </div>        
        </li>
    </loop/>
</ul>

js代码

方法1：

$("ul>li").each(function(){
    var thisClass = $(this).attr("class");
    $(this).children(".swiper-container").swiper({
        loop: true,
        initialSlide :0,
        pagination: '.'+thisClass + " .swiper-pagination",
        nextButton: '.'+thisClass + " .arrow-right",
        prevButton: '.'+thisClass + " .arrow-left"
    });
});

方法2：精华版

使用jquery中选择器的上下文，$(elem,上下文）

$(".swiper-container").each(function(){
    $(this).swiper({
        loop: true,
        initialSlide :0,
        pagination:$('.swiper-pagination',this),
        nextButton: $('.arrow-right',this),
        prevButton:$('.arrow-left',this)
    });
});