How to optimise this slice/split function?
I've thrown together an ugly function that takes an unordered list (`ul#source`), and splits it up into a new list (`ul.images`) that contains nested lists. 

This is to fit a certain number of items into a carousel panel. If the browser is resized, `#source` is re-split depending on how many items can fit on the new panel size.

    $.fn.splitUp=function(splitBy) {
    	$all = $(this).find(' > *');
    	var fragment = Math.ceil($all.length / splitBy);  
    	for ( i=0; i< fragment; i++ ) 
    		$all.slice(splitBy*i, splitBy*(i+1)).wrapAll('<li/>').wrapAll('<ul/>');
    	$('.images').html($(this));
    	var cnt = $('.images #source').contents();
    	$('.images #source').replaceWith(cnt);	
    }

**What (if anything) can I do to clean this up, and make it more efficient?**

To illustrate, this is a source list with 12 items:

	<ul id="source">
		<li class="cultural"></li>
		<li class="masterplanning urban"></li>
		<li class="residential"></li>
		<li class="civic-public cultural"></li>
		<li class="educational"></li>
		<li class="educational"></li>
		<li class="cultural"></li>
		<li class="workplace"></li>
		<li class="cultural exhibitions"></li>
		<li class="cultural"></li>
		<li class="educational masterplanning"></li>
		<li class="civic-public residential workplace"></li>
	</ul>

If I call the function, like so: <br/>`$('#source').clone().splitUp(5);`<br/>Then the output is 3 nested lists (5 + 5 + 2).

	<ul class="images">
		
		<li>
			<ul>
				<li class="cultural"></li>
				<li class="masterplanning urban"></li>
				<li class="residential"></li>
				<li class="civic-public cultural"></li>
				<li class="educational"></li>
			</ul>
		</li>
	
		<li>
			<ul>
				<li class="educational"></li>
				<li class="cultural"></li>
				<li class="workplace"></li>
				<li class="cultural exhibitions"></li>
				<li class="cultural"></li>
				<li class="educational masterplanning"></li>
				<li class="civic-public residential workplace"></li>
			</ul>
		</li>

		<li>
			<ul>
				<li class="educational masterplanning"></li>
				<li class="civic-public residential workplace"></li>
			</ul>
		</li>
	
	</ul>

So, again, my question is: what can I do to improve this? Is my basic approach even correct, i.e. have a source list and always calculate from that? If not, what would you recommend?

Thanks!
How to optimise this slice/split function?
===

I've thrown together an ugly function that takes an unordered list (`ul#source`), and splits it up into a new list (`ul.images`) that contains nested lists. 

This is to fit a certain number of items into a carousel panel. If the browser is resized, `#source` is re-split depending on how many items can fit on the new panel size.

    $.fn.splitUp=function(splitBy) {
    	$all = $(this).find(' > *');
    	var fragment = Math.ceil($all.length / splitBy);  
    	for ( i=0; i< fragment; i++ ) 
    		$all.slice(splitBy*i, splitBy*(i+1)).wrapAll('<li/>').wrapAll('<ul/>');
    	$('.images').html($(this));
    	var cnt = $('.images #source').contents();
    	$('.images #source').replaceWith(cnt);	
    }

**What (if anything) can I do to clean this up, and make it more efficient?**

To illustrate, this is a source list with 12 items:

	<ul id="source">
		<li class="cultural"></li>
		<li class="masterplanning urban"></li>
		<li class="residential"></li>
		<li class="civic-public cultural"></li>
		<li class="educational"></li>
		<li class="educational"></li>
		<li class="cultural"></li>
		<li class="workplace"></li>
		<li class="cultural exhibitions"></li>
		<li class="cultural"></li>
		<li class="educational masterplanning"></li>
		<li class="civic-public residential workplace"></li>
	</ul>

If I call the function, like so: <br/>`$('#source').clone().splitUp(5);`<br/>Then the output is 3 nested lists (5 + 5 + 2).

	<ul class="images">
		
		<li>
			<ul>
				<li class="cultural"></li>
				<li class="masterplanning urban"></li>
				<li class="residential"></li>
				<li class="civic-public cultural"></li>
				<li class="educational"></li>
			</ul>
		</li>
	
		<li>
			<ul>
				<li class="educational"></li>
				<li class="cultural"></li>
				<li class="workplace"></li>
				<li class="cultural exhibitions"></li>
				<li class="cultural"></li>
				<li class="educational masterplanning"></li>
				<li class="civic-public residential workplace"></li>
			</ul>
		</li>

		<li>
			<ul>
				<li class="educational masterplanning"></li>
				<li class="civic-public residential workplace"></li>
			</ul>
		</li>
	
	</ul>

So, again, my question is: what can I do to improve this? Is my basic approach even correct, i.e. have a source list and always calculate from that? If not, what would you recommend?

Thanks!