0

我在 div 中有一个很大的无序列表，需要将其拆分为多个列表。这样做的原因是我需要将这些东西分成 5 列用于 Bootstrap，以便所有响应的东西都能正常工作。我想专门拆分About Us、Technology、Patients和Site Map列表元素。

我曾尝试使用 jQuery .before 在“关于我们”列表项之前插入一些 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>
4

1 回答 1

1

我的建议是执行以下操作：

  1. 首先，创建一个数组数组，并在其中填充对列表项的引用，就像您希望它们在单独的列表中一样。
  2. 在 DOM 之外生成新元素，将列表项移入其中。
  3. 最后，用新创建的元素替换 DOM 中的现有元素。

这有三个好处：

  1. 在一次调用中修改 DOM 是最有效的。
  2. DOM 永远不会处于无效状态。
  3. 如果您首先确定单独的列表，则生成元素的代码应该更简单。
于 2013-06-13T00:55:06.300 回答