动态将元素重新分组

在制作网站的过程中，经常碰到这样的滚动列表效果--》将列表的所有元素分组，然后进行滚动，比如下图中的效果：

将列表中的元素每5个分为一组（放在一个li里面），然后进行滚动。

 

在制作动态网站的过程中，无法确定一共有多少个元素，所以不知道改分多少组，在下面的案例中就是不知道该创建多少的li元素来包裹他们，所以需要用js动态的分组。

代码如下：

html：

<div class="sjal_list">
					<ul class="ul">
					<!-- 600*476 -->
						<div class="item">
							<img src="images/sjal_bimg1.jpg" alt="">
							<a href=""><div class="shadow">
								<p class="p title">Dara Hotel</p>
								<span class="more"></span>
							</div></a>
						</div>
						
						<div class="item">
							<img src="images/sjal_bimg1.jpg" alt="">
							<a href=""><div class="shadow">
								<p class="p title">Dara Hotel</p>
								<span class="more"></span>
							</div></a>
						</div>
						<div class="item">
							<img src="images/sjal_bimg1.jpg" alt="">
							<a href=""><div class="shadow">
								<p class="p title">Dara Hotel</p>
								<span class="more"></span>
							</div></a>
						</div>
						<div class="item">
							<img src="images/sjal_bimg1.jpg" alt="">
							<a href=""><div class="shadow">
								<p class="p title">Dara Hotel</p>
								<span class="more"></span>
							</div></a>
						</div><div class="item">
							<img src="images/sjal_bimg1.jpg" alt="">
							<a href=""><div class="shadow">
								<p class="p title">Dara Hotel</p>
								<span class="more"></span>
							</div></a>
						</div>
						<div class="item">
							<img src="images/sjal_bimg1.jpg" alt="">
							<a href=""><div class="shadow">
								<p class="p title">Dara Hotel</p>
								<span class="more"></span>
							</div></a>
						</div>
						<div class="item">
							<img src="images/sjal_bimg1.jpg" alt="">
							<a href=""><div class="shadow">
								<p class="p title">Dara Hotel</p>
								<span class="more"></span>
							</div></a>
						</div>
					</ul>
				</div>

　　js:

var linum=0;var i=0;var j=0;
 	linum=Math.ceil($('.sjal_list .item').length/5);  //判断该创建几个li，数字5代表每组里放几个元素
 	for(i=0;i<linum;i++){
 		$('.sjal_list>ul').append('<li class="libox libox'+(i+1)+'"></li>');  //循环创建li，并插入到ul中
 	};

 	$('.sjal_list .item').each(function(i){
 		j=Math.ceil((i+1)/5);		//判断当前元素应该在哪个分组种
 		$(this).appendTo('.libox'+j);

 		//该案例中的效果，每组的第一个要把尺寸放大
 		//.sjal_list img{width: 300px;height: 238px;}
		//.sjal_list .bimg img{width: 600px;height: 476px;}
 		if(i%5==0){
 			$(this).addClass('bimg');
 		}
 	});

 	// 用owlCarousel执行滚动效果
 	$('.sjal_list>ul').owlCarousel({
	 	'items':1,
	 	'pagination':true,
	 	'stopOnHover':true,
	 	'autoPlay':true
	});