CODEWITHSUNDEEP
javascriptjquery
Wasiim
Wasiim

Reputation: 146

Creating dynamic ul li for a carousel with Jquery

I am building a carousel with a ul li dynamically using the following code:

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

The code above is generating a html that looks like this(unnecessary codes removed):

<div class="flexslider">
  <ul class="slides">
    <li ean="9904153320507">
    <li ean="9904153300509">
    <li ean="9904153441004">
    <li ean="9911199120503">
    <li ean="9911199071003">
  </ul>
</div>

My problem is, i have to group all the LI's in sets of 10, whereby one li would countain a ul with 10 such LI's. As follows:

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

Can anyone please help me on achieving the above code with my starting JS

Any help would be appreciated

Thanks

Upvotes: 0

Views: 683

Answers (1)

Phobos
Phobos

Reputation: 91

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

Upvotes: 1

Related Questions