SO - 18868551

by Arun P Johny

HTML

<div class="container">
    <div class="child 07-2013">
        <p>Some content</p>
    </div>
    <div class="child 06-2013">
        <p>Some content</p>
    </div>
    <div class="child 06-2013">
        <p>Some content</p>
    </div>
    <div class="child 11-2012">
        <p>Some content</p>
    </div>
    <div class="child 11-2012">
        <p>Some content</p>
    </div>
</div>

CSS

#s1 {
    display:none;
}
#outer_container {
    background:#ededed;
    position:absolute;
    top:100px;
    left:40px;
    width:400px;
    height:100px;
    overflow:hidden;
}
#inner_container {
    position:absolute;
    width:2000px;
    height:100px;
    top:0px;
    left:0px;
    background:#ededed;
}
.draggable_element {
    position:relative;
    width:90px;
    height:80px;
    top:10px;
    left:20px;
    margin-right:50px;
    background:#ff9600;
    float:left;
}

JavaScript

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], flag = {}
$('.container > .child').each(function () {
    var month = this.className.match(/(\d{2})-(\d{4})/);
    if(flag[month[0]]){
        return;
    }
    flag[month[0]] = true;
    $(this).before('<div class="header">' + months[month[1] - 1] + ' ' + month[2] + '</div>')
})