Stackoverflow 2013-06-12

by john_s

HTML

<div class="span2 offset1">
    <ul>
        <li class="list-header"><a href="#">Home</a>

        </li>
        <li><a href="#">LASIK</a>

        </li>
        <li><a href="#">CATARACT</a>

        </li>
        <li><a href="#">PATIENTS</a>

        </li>
        <li><a href="#">Cataract Self Evaluation</a>

        </li>
        <li><a href="#">New Patient Information</a>

        </li>
        <li><a href="#">Patient Education</a>

        </li>
        <li><a href="#">3D Eye Library</a>

        </li>
        <li><a href="#">Vitreo-Retinal Fellowships</a>

        </li>
        <li class="list-header"><a href="#">About Us</a>

        </li>
        <li class="list-header"><a href="#">Doctors</a>

        </li>
        <li class="list-header"><a href="#">Services</a>

        </li>
        <li><a href="#">Laser Cataract</a>

        </li>
        <li><a href="#">Cornea</a>

        </li>
        <li><a href="#">Diabetic Eye Care</a>

        </li>
        <li><a href="#">Dry Eyes</a>

        </li>
        <li><a href="#">Flashers & Floaters</a>

        </li>
        <li><a href="#">Glaucoma</a>

        </li>
        <li><a href="#">Macular Degeneration</a>

        </li>
        <li><a href="#">Retinal Detachments</a>

        </li>
        <li class="list-header"><a href="#">Technology</a>

        </li>
        <li class="list-header"><a href="#">News</a>

        </li>
        <li class="list-header"><a href="#">Locations</a>

        </li>
        <li><a href="#">West Mifflin</a>

        </li>
        <li><a href="#">Butler</a>

        </li>
        <li><a href="#">Greensburg</a>

        </li>
        <li><a href="#">Meadville</a>

        </li>
        <li><a href="#">Monroeville</a>

        </li>
        <li><a href="#">Uniontown</a>

        </li>
        <li><a href="#">Wheeling</a>

        </li>
        <li class="list-header"><a href="#">Patients</a>

        </li>
        <li><a href="#">Literature</a>

        </li>
        <li><a...

JavaScript

var itemLists = [];

// Split up the list.
var BREAKS = ['About Us', 'Technology', 'Patients', 'Site Map'];
var itemList = null;
$('div.span2.offset1').find('li').each(function () {
    var $item = $(this);
    if (!itemList || ($.inArray($item.children('a').text(), BREAKS) >= 0)) {
        itemList = [];
        itemLists.push(itemList);
    }
    itemList.push($item);
});

// Generate the new elements
var $container = $('<div></div>');
$.each(itemLists, function (i, itemList) {
    var $div = $('<div class="span2"></div>');
    var $ul = $('<ul></ul>').appendTo($div);
    $.each(itemList, function (j, $item) {
        $ul.append($item);
    });
    $container.append($div);
});

// Replace the existing elements in the DOM with the new elements.
$('div.span2.offset1').replaceWith($container.children());