CODEWITHSUNDEEP
javascriptjqueryhtml
Nick Tiberi
Nick Tiberi

Reputation: 1141

How to split a <ul> into multiple lists based on the CSS class and contents of <li> elements

I have a big unordered list inside a div that I need to be split into multiple lists. The reason for this is that I need to split this stuff into 5 columns for Bootstrap so all the responsive stuff works correctly. I want to split specifically on the About Us, Technology, Patients, and Site Map list elements.

I have tried using jQuery .before to insert some HTML before the "About Us" list item, but the resulting code is messed up because it is invalid HTML. I tried to do something like this, but it didn't work:

var footerLinks = $('#footer ul li');

 footerLinks.each(function() {
    if ($(this).attr('class') === 'list-header') {
        if ($(this).find('a').text() === "About Us") {
            $(this).before('</ul></div><div class="span2"><ul>');
        }
    }
 });

Any thoughts? Thanks for your help!

What I have Now

<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 href="#">Forms</a></li>
                    <li><a href="#">Patient Education</a></li>
                    <li><a href="#">My AIO</a></li>
                    <li class="list-header"><a href="#">Testimonials</a></li>
                    <li class="list-header"><a href="#">Clinical Trials</a></li>
                    <li class="list-header"><a href="#">Careers</a></li>
                    <li class="list-header"><a href="#">Contact Us</a></li>
                    <li class="list-header"><a href="#">Site Map</a></li>
                    <li class="list-header"><a href="#">Privacy Policy</a></li>
                    <li class="list-header"><a href="#">Fellowship</a></li>
                </ul>
            </div>

What I want

<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>
                </ul>
            </div>
            <div class="span2">
                <ul>
                    <li class="list-header"><a href="#">About Us</a></li>
                </ul>
                <ul>
                    <li class="list-header"><a href="#">Doctors</a></li>
                </ul>
                <ul>
                    <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>
                </ul>
            </div>
            <div class="span2">
                <ul>
                    <li class="list-header"><a href="#">Technology</a></li>
                </ul>
                <ul>
                    <li class="list-header"><a href="#">News</a></li>
                </ul>
                <ul>
                    <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>
                </ul>
            </div>
            <div class="span2">
                <ul>
                    <li class="list-header"><a href="#">Patients</a></li>
                    <li><a href="#">Literature</a></li>
                    <li><a href="#">Forms</a></li>
                    <li><a href="#">Patient Education</a></li>
                    <li><a href="#">My AIO</a></li>
                </ul>
                <ul>
                    <li class="list-header"><a href="#">Testimonials</a></li>
                </ul>
                <ul>
                    <li class="list-header"><a href="#">Clinical Trials</a></li>
                </ul>
                <ul>
                    <li class="list-header"><a href="#">Careers</a></li>
                </ul>
                <ul>
                    <li class="list-header"><a href="#">Contact Us</a></li>
                </ul>
            </div>
            <div class="span2">
                <ul>
                    <li class="list-header"><a href="#">Site Map</a></li>
                </ul>
                <ul>
                    <li class="list-header"><a href="#">Privacy Policy</a></li>
                </ul>
                <ul>
                    <li class="list-header"><a href="#">Fellowship</a></li>
                </ul>
            </div>

Upvotes: 0

Views: 702

Answers (1)

John S
John S

Reputation: 21482

My advice is to do the following:

  1. First, create an array of arrays and fill it with references to the list items as you want them in the separate lists.
  2. Generate the new elements outside of the DOM, moving the list items into them.
  3. Last, replace the existing element in the DOM with the newly created elements.

This has three benefits:

  1. It is most efficient to modify the DOM in a single call.
  2. The DOM will never be in an invalid state.
  3. The code to generate the elements should be simpler if you determine the separate lists first.

Upvotes: 1

Related Questions