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)
    });
});