使用Jquery为旋转木马创建动态ui
Creating dynamic ul li for a carousel with Jquery
我正在使用以下代码动态地构建一个带有ul li的旋转木马:
var arrEanSample = [];
var arrPathSample = [];
var arrValSample = [];
var thecookie = $.cookie("sample");
var cookies = thecookie.split("|");
cookies.forEach(function(item){
var barcode= item.split('~')[0];
var value = item.split('~')[1];
var path = item.split('~')[2];
arrEanSample.push(barcode);
arrPathSample.push(path);
arrValSample.push(value);
});
var output='<ul class="slides">';
for(var i = 0; i < arrEanSample.length; i++)
{
output+= '<li ean="' + arrEanSample[i] + '">'
<img src="' + arrPathSample[i] + '" alt="pix" draggable="false">'
<a imgpath="' + arrPathSample[i] + '" value="' + arrValSample[i] +'" ean="' + arrEanSample[i] +'" class="unselectsample-thumb" data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">'
<i aria-hidden="true" class="fonticon fonticon-close-neg">'
<span class="sr-only">Remove</span>'
</i>'
</a>'
</li>';
}
output+='</ul>';
$('.flexslider').empty().append(output);
上面的代码生成的html看起来像这样(去掉不必要的代码):
<div class="flexslider">
<ul class="slides">
<li ean="9904153320507">
<li ean="9904153300509">
<li ean="9904153441004">
<li ean="9911199120503">
<li ean="9911199071003">
</ul>
</div>
我的问题是,我必须将所有LI分组为10组,其中一个LI将包含一个带有10个这样的LI的ul。如下:
<div class="flexslider">
<ul class="slides">
<li>
<div class="list-samples">
<ul class="reset">
<li> li number 1 </li>
<li> li number 2 </li>
<li> li number 3</li>
<li> li number 4</li>
<li> li number 5</li>
<li> li number 6</li>
<li> li number 7</li>
<li> li number 8</li>
<li> li number 9</li>
<li> li number 10</li>
</ul>
</div>
</li>
<li>
<div class="list-samples">
<ul class="reset">
<li> li number 11 </li>
<li> the list goes on - as sets of 10's ... </li>
</ul>
</div>
</li>
</ul>
</div>
有没有人可以帮助我实现上面的代码与我的开始JS
如有任何帮助,不胜感激
谢谢
output = '<ul class="slides"><li><div class="list-samples"><ul class="reset">';
for(var i = 0; i < arrEanSample.length; i++){
if(i % 10 == 0 && i != 0){
output += '</ul></div></li><li><div class="list-samples"><ul class="reset">';
}
output+= '<li ean="' + arrEanSample[i] + '">'
<img src="' + arrPathSample[i] + '" alt="pix" draggable="false">'
<a imgpath="' + arrPathSample[i] + '" value="' + arrValSample[i] +'" ean="' + arrEanSample[i] +'" class="unselectsample-thumb" data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">'
<i aria-hidden="true" class="fonticon fonticon-close-neg">'
<span class="sr-only">Remove</span>'
</i>'
</a>'
</li>';
}
}
output += '</ul></div></li></ul>';
相关文章:
- 在有角度的ui网格中设置动态列的问题
- 剑道UI下载列表:如何动态添加新元素
- 语义UI动态下拉菜单重新初始化问题
- jQuery mobile-动态更改ui页面背景颜色
- 动态创建的 jQuery UI 对话框错误后 jQuery 2.2.0 升级
- 动态模板 URL 在角度 ui 路由器中解析时
- AngularJS - ui.router - 如何在动态添加它们后重定向到所需的状态
- 关闭动态创建的 jQuery-ui 对话框
- WordPress + JQuery UI 选项卡 + 动态更改选项卡的宽度
- jQuery UI中的动态url,数据表
- jQuery UI排序无法使用动态表
- 在AngularJS UI路由器中动态更改视图
- 使用ui路由器实现动态URL路由的最佳方式是什么
- 如何将动态模板加载到$uibModal.open()(Angular UI引导程序)中
- angular ui:ui路由器动态路由和状态
- Angular UI Bootstrap Datepicker动态日期(变量)
- 如何从静态ui引导选项卡切换到动态ui选项卡
- 动态ui-sref内部指令
- 在Angular JS中使用HTML版本来渲染动态UI
- 使用Jquery为旋转木马创建动态ui