Skip to content

Instantly share code, notes, and snippets.

@fahdi
Created December 23, 2013 21:23
Show Gist options
  • Save fahdi/8104919 to your computer and use it in GitHub Desktop.
Save fahdi/8104919 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>
</body>
</html>
jQuery(function($){
var size = 4,
$ul = $("ul"),
$lis = $ul.children().filter(':gt(' + (size - 1) + ')'),
loop = Math.ceil($lis.length / size),
i = 0;
$ul.css('float','left').wrap("<div style='overflow: hidden'></div>");
for(; i < loop; i = i + 1){
$ul = $("<ul />").css('float','left').append($lis.slice(i * size, (i * size) + 4)).insertAfter($ul);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment