UL organization

Organize a list of years by year appending the year of column to the top.

by wholypantalones

HTML

<div id="announcements">
    <ul>
        <li class="child">2013</li>
        <li class="child">2012</li>
        <li class="child">2011</li>
        <li class="child">2010</li>
        <li class="child">2009</li>
        <li class="child">2008</li>
        <li class="child">2007</li>
        <li class="child">2006</li>
        <li class="child">2005</li>
        <li class="child">2004</li>
        <li class="child">2003</li>
        <li class="child">2002</li>
        <li class="child">2001</li>
        <li class="child">2000</li>
        <li class="child">1999</li>
        <li class="child">1998</li>
        <li class="child">1997</li>
        <li class="child">1996</li>
        <li class="child">1995</li>
        <li class="child">1994</li>
        <li class="child">1993</li>
        <li class="child">1992</li>
        <li class="child">1991</li>
        <li class="child">1990</li>
        <li class="child">1989</li>
        <li class="child">1988</li>
        <li class="child">1987</li>
        <li class="child">1986</li>
        <li class="child">1985</li>
        <li class="child">1984</li>
        <li class="child">1983</li>
        <li class="child">1982</li>
        <li class="child">1981</li>
        <li class="child">1980</li>
        <li class="child">1979</li>
        <li class="child">1978</li>
        <li class="child">1977</li>
        <li class="child">1976</li>
        <li class="child">1975</li>
        <li class="child">1974</li>
        <li class="child">1973</li>
        <li class="child">1972</li>
        <li class="child">1971</li>
        <li class="child">1970</li>
        <li class="child">1969</li>
        <li class="child">1968</li>
        <li class="child">1967</li>
        <li class="child">1966</li>
        <li class="child">1965</li>
        <li class="child">1964</li>
        <li class="child">1963</li>
        <li class="child">1962</li>
        <li class="child">1961</li>
        <li class="child">1960</li>
        <li...

CSS

.ul_wrap {
    float:left;
    list-style-type:none;
    list-style-image:none;
    text-align:center;
    padding-left:35px;
}

.ul_wrap strong {font-weight:bold;}

JavaScript

$("#announcements ul").find("li:nth-child(10n+5)").removeClass("child").addClass("parent");

var $everything = $('.parent,.child');
var splitAtHeaders = [];

$everything.each(function(index) {
    var $item = $(this);
    //change .prop() to .attr() in this line for versions lower than jQuery 1.7
    if ('parent' === $item.prop('className') || !splitAtHeaders.length) {
        splitAtHeaders[splitAtHeaders.length] = [];
    }
    splitAtHeaders[splitAtHeaders.length - 1].push($item);
});

$.each(splitAtHeaders, function() {
    var currentWrapper = null;
    $.each(this, function(index) {
        if (0 === index || !currentWrapper) {
            currentWrapper = this.wrap('<ul class="ul_wrap">');
        }
        else {
            currentWrapper.append(this);
        }
    });
});

$("ul.ul_wrap").each(function(i) {
    var str = $(this).find("li:last").text();
    var result = str.charAt(2);
    $(this).prepend("<strong>" + result + 0 + "</strong>");
});