Kitten Caboodles

Use jQuery to separate a set of items into groups of an arbitrary number.

by nate

HTML

<h1>Separate kittens into caboodles</h1>

<div id="kittens">
    <!-- Markup contains a simple list of sixteen kittens -->
    <a href="#"><img src="http://placekitten.com/100/70" /></a>
    <a href="#"><img src="http://placekitten.com/100/70" /></a>
    <a href="#"><img src="http://placekitten.com/100/70" /></a>
    <a href="#"><img src="http://placekitten.com/100/70" /></a>
    <a href="#"><img src="http://placekitten.com/100/70" /></a>
    <a href="#"><img src="http://placekitten.com/100/70" /></a>
    <a href="#"><img src="http://placekitten.com/100/70" /></a>
    <a href="#"><img src="http://placekitten.com/100/70" /></a>
    <a href="#"><img src="http://placekitten.com/100/70" /></a>
    <a href="#"><img src="http://placekitten.com/100/70" /></a>
    <a href="#"><img src="http://placekitten.com/100/70" /></a>
    <a href="#"><img src="http://placekitten.com/100/70" /></a>
    <a href="#"><img src="http://placekitten.com/100/70" /></a>
    <a href="#"><img src="http://placekitten.com/100/70" /></a>
    <a href="#"><img src="http://placekitten.com/100/70" /></a>
    <a href="#"><img src="http://placekitten.com/100/70" /></a>
    
</div>

CSS

/* This CSS fanciness is ABSOLUTELY VITAL to the didactic purposes of this example. VITAL, I tell you. */

body {
    background-color: #ccc;
    font-family: sans-serif;
}

h1 {
    font-size: 24px;
}

a img {
    display: block;
    height: 70px;
    width: 100px;
}

div > a {
    background-color: #fff;
    display: inline-block;
    margin: 5px;
    padding: 10px;
    position: relative;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    
    -moz-box-shadow: 0 0 0.5em #000;
    -webkit-box-shadow: 0 0 0.5em #000;
}

div > a > img {
    position: relative;
    z-index: 1;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

div > a:after {
    bottom: 0;
    content: '';
    display: block;
    height: 70px;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 100px;
    z-index: 1;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    
    -moz-box-shadow: inset 0 0 1em #000;
    -webkit-box-shadow: inset 0 0 1em #000;
}

div.caboodle {
    background-color: #666;
    display: inline-block;
    margin: 5px 0;
    padding: 10px;
    
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    
}

JavaScript

var kittens = $( '#kittens' ),
    // Change caboodle size to whatever you want
    caboodleSize = 4;

// Detach kittens from the DOM while we manipulate them for the sake of speed
kittens.detach();

kittens.find( 'a:nth-child(' + caboodleSize + 'n + 1)' ).addClass( 'new-caboodle' ).each(function( i, item ) {
    
    $( item )
        .nextUntil( '.new-caboodle', 'a' )
        .andSelf()
        .wrapAll( '<div class="caboodle"></div>' )
        .removeClass( 'new-caboodle' );
    
});

// Reattach kittens wherever appropriate
kittens.appendTo( 'body' );


// Andrew's example! Which is even better than mine. I'll admit it now.
/*
var kittens = $( '#kittens' ),
    cats = kittens.find('a'),
    // Change caboodle size to whatever you want
    caboodleSize = 4;

// Detach kittens from the DOM while we manipulate them for the sake of speed
cats.detach();

for(var count = cats.length; count > 0; count -= caboodleSize) {
    $('<div class="caboodle">').append(
        $(cats.splice(0, caboodleSize))
    ).appendTo(kittens);
}

// Reattach kittens wherever appropriate
kittens.appendTo( 'body' );
*/