javascript - 分割する方法CSS クラスと内容に基づいて複数のリストに要素

Question

複数のリストに分割する必要がある div 内に大きな順序付けられていないリストがあります。この理由は、すべてのレスポンシブ機能が正しく機能するように、Bootstrap 用にこのデータを 5 つの列に分割する必要があるためです。About Us、Technology、Patients、Site Mapの各リスト要素で具体的に分割したいと思います。

jQuery .before を使用して、「About Us」リスト項目の前に HTML を挿入しようとしましたが、無効な HTML であるため、結果のコードが台無しになります。私はこのようなことをしようとしましたが、うまくいきませんでした:

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>');
        }
    }
 });

何かご意見は？ご協力いただきありがとうございます！

私が今持っているもの

<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>

私が欲しいもの

<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>