jQuery split long ul list to multiple UL

1. HTML code

<ul id="bigList">
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
</ul>
2. jQuery Code 
 var $bigList = $('#bigList'), group;
  while((group = $bigList.find('li:lt(20)').remove()).length){
    $('
    ').append(group).appendTo('body');
  }
Working Demo

Comments

Post a Comment

Popular posts from this blog

PHP: Date Difference for PHP 5.2

function days_diff($d1, $d2) {     $x1 = days($d1);     $x2 = days($d2);      if ($x1 && $x2) {         return abs($x1 - $x2);     } } function days($x) {     if (get_class($x) != 'DateTime') {         return false;     }      $y = $x->format('Y') - 1;     $days = $y * 365;     $z = (int)($y / 4);     $days += $z;     $z = (int)($y / 100);     $days -= $z;     $z = (int)($y / 400);     $days += $z;     $days += $x->format('z');     return $days; } // Call function $start_date = '2015-08-19 15:18:19'; $end_date = '2015-08-22 15:18:19'; $date1=date_create(date('Y-m-j',strtotime($start_date))); $date2=date_create(date('Y-m-j',strtotime($end_date))); $diff=date_diff($date1,$date2); echo $diff;
Read more

HTML5 video loop src change on end play function

1. HTML <video id="homevideo" width="100%" autoplay onended="run()">     <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> </video> <ul>     <li>http://www.w3schools.com/html/mov_bbb.mp4</li>     <li>http://www.w3schools.com/html/movie.mp4</li> </ul> 2. CSS <style type='text/css'>     ul {         display:none;     }   </style> 3. jQuery <script type="text/javascript"> video_count = 0; videoPlayer = document.getElementById("homevideo"); function run(){    video_count++;     var countVideo = $('li').length;         if (video_count == countVideo) video_count = 0;        var nextVideo = $('li').eq(video_count).text();         videoPlayer.src = nextVideo;     videoPlayer.play();         }; </script> Working Demo
Read more

Custom OpenCart 2.3.0.2 theme

Image
I was looking to customize the default theme in OpenCart 2.3.0.2 and realized that I will probably need to do quite a bit of work given there was no immediate “help” related on the subject. In essence it turned out to be a lot less painful than I thought. Here is what I did. Assuming new theme name “mytheme” and title “My Theme”. Make copies… To start with copy the  default  folder found in upload/catalog/view/theme/default to a new folder in the same directory. Name it “ mytheme “. Then copy the  theme_default.php  file in upload/admin/controller/extension/theme and place it in same directory. Name it “ mytheme.php “. + Rename the class to (line 2): ControllerExtensionThemeMyTheme + Replace all “ theme_default ” text to “ mytheme “. Yes there are a lot (197). Copy the  theme_default.tpl  in upload/admin/view/template/extension/theme and place it in the same directory. Name it “ mytheme.tpl “. + Replace all “ theme_default ” text to “ mytheme “. (48) Cop
Read more