Question

我正在使用以下代码动态构建一个带有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

来实现上述代码

任何帮助将不胜感激

由于

Answer 1

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>';

使用Jquery为轮播创建动态ul li

1 个答案: