Question

我创建了以下过程。基本上它遍历一个巨大的无序列表，其中包含多个级别的嵌套列表，并创建一个2级嵌套无序列表。它运行良好，但在IE7中非常慢。 FireFox和Safari没有大问题。 jQuery不是很好我想知道我是否可以通过使用更好/更快/更智能的功能来加速这个。由于我使用的CMS我不能改变输出，也不能改变我使用的jQuery版本，即1.2.6。

这就是我所拥有的;

$('ul#mainnav li ul li').each(function() {
    // add level class
    $(this).addClass('depth-'+$(this).parents('ul').length);
    // make uls siblings in stead of children
    $($(this).children('ul')).insertAfter($(this));
});
// take all lis out of their uls
$('ul#mainnav li ul').each(function() {
    $(this).replaceWith($(this).children());                
});
// wrap chidlren lis with div
$('ul#mainnav li').each(function() {
    $(this).children('li:first').before('<ul class="megamenu" />');     
    $(this).children('.megamenu').append($(this).children('li'));
});
// apply plugin easyLisSplitter
$('.megamenu').easyListSplitter({ 
    colNumber: 5
});

有什么想法吗？如果需要更多信息，请告诉我！

干杯

修改

所有回复的Thanx。还没有尝试过。使用var $ this = $（this）;加速20毫秒。好吧，我会接受那些。欢迎所有帮助！这是之前的标记：

<ul id="mainnav">
<li><a href="#">A-1</a>
    <ul>
        <li><a href="#">A-1-1</a>
            <ul>
                <li><a href="#">A-1-1-1</a></li>
                <li><a href="#">A-1-1-2</a></li>
                <li><a href="#">A-1-1-3</a></li>
            </ul>
        </li>
        <li><a href="#">A-1-2</a></li>
        <li><a href="#">A-1-3</a>
            <ul>
                <li><a href="#">A-1-3-1</a></li>
                <li><a href="#">A-1-3-2</a></li>
                <li><a href="#">A-1-3-3</a></li>
            </ul>
        </li>
        <li><a href="#">A-1-4</a>
            <ul>
                <li><a href="#">A-1-4-1</a></li>
                <li><a href="#">A-1-4-2</a></li>
                <li><a href="#">A-1-4-3</a></li>
                <li><a href="#">A-1-4-4</a></li>
                <li><a href="#">A-1-4-5</a></li>
            </ul>
        </li>
        <li><a href="#">A-1-5</a>
            <ul>
                <li><a href="#">A-1-5-1</a></li>
                <li><a href="#">A-1-5-2</a></li>
                <li><a href="#">A-1-5-3</a></li>
                <li><a href="#">A-1-5-4</a></li>
                <li><a href="#">A-1-5-5</a></li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="#">B-1</a>
    <ul>
        <li><a href="#">B-1-1</a>
            <ul>
                <li><a href="#">B-1-1-1</a></li>
                <li><a href="#">B-1-1-2</a></li>
                <li><a href="#">B-1-1-3</a></li>
            </ul>
        </li>
        <li><a href="#">B-1-2</a></li>
        <li><a href="#">B-1-3</a>
            <ul>
                <li><a href="#">B-1-3-1</a></li>
                <li><a href="#">B-1-3-2</a></li>
                <li><a href="#">B-1-3-3</a></li>
            </ul>
        </li>
        <li><a href="#">B-1-4</a>
            <ul>
                <li><a href="#">B-1-4-1</a></li>
                <li><a href="#">B-1-4-2</a></li>
                <li><a href="#">B-1-4-3</a></li>
                <li><a href="#">B-1-4-4</a></li>
                <li><a href="#">B-1-4-5</a></li>
            </ul>
        </li>
        <li><a href="#">B-1-5</a>
            <ul>
                <li><a href="#">B-1-5-1</a></li>
                <li><a href="#">B-1-5-2</a></li>
                <li><a href="#">B-1-5-3</a></li>
                <li><a href="#">B-1-5-4</a></li>
                <li><a href="#">B-1-5-5</a></li>
            </ul>
        </li>
    </ul>
</li>

这是后来的;

<ul id="mainnav">
<li><a href="#">A-1</a>
    <div class="listContainer1">
        <ul class="megamenu listCol1">
            <li class="depth-2"><a href="#">A-1-1</a></li>
            <li class="depth-3"><a href="#">A-1-1-1</a></li>
            <li class="depth-3"><a href="#">A-1-1-2</a></li>
            <li class="depth-3"><a href="#">A-1-1-3</a></li>
            <li class="depth-2"><a href="#">A-1-2</a></li>
        </ul>
        <ul class="listCol2 megamenu">
            <li class="depth-2"><a href="#">A-1-3</a></li>
            <li class="depth-3"><a href="#">A-1-3-1</a></li>
            <li class="depth-3"><a href="#">A-1-3-2</a></li>
            <li class="depth-3"><a href="#">A-1-3-3</a></li>
            <li class="depth-2"><a href="#">A-1-4</a></li>
        </ul>
        <ul class="listCol3 megamenu">
            <li class="depth-3"><a href="#">A-1-4-1</a></li>
            <li class="depth-3"><a href="#">A-1-4-2</a></li>
            <li class="depth-3"><a href="#">A-1-4-3</a></li>
            <li class="depth-3"><a href="#">A-1-4-4</a></li>
            <li class="depth-3"><a href="#">A-1-4-5</a></li>
        </ul>
        <ul class="listCol4 megamenu">
            <li class="depth-2"><a href="#">A-1-5</a></li>
            <li class="depth-3"><a href="#">A-1-5-1</a></li>
            <li class="depth-3"><a href="#">A-1-5-2</a></li>
            <li class="depth-3"><a href="#">A-1-5-3</a></li>
            <li class="depth-3"><a href="#">A-1-5-4</a></li>
        </ul>
        <ul class="listCol5 megamenu last">
            <li class="depth-3"><a href="#">A-1-5-5</a></li>
        </ul>
    </div>
</li>
<li><a href="#">B-1</a>
    <div class="listContainer2">
        <ul class="megamenu listCol1">
            <li class="depth-2"><a href="#">B-1-1</a></li>
            <li class="depth-3"><a href="#">B-1-1-1</a></li>
            <li class="depth-3"><a href="#">B-1-1-2</a></li>
            <li class="depth-3"><a href="#">B-1-1-3</a></li>
            <li class="depth-2"><a href="#">B-1-2</a></li>
        </ul>
        <ul class="listCol2 megamenu">
            <li class="depth-2"><a href="#">B-1-3</a></li>
            <li class="depth-3"><a href="#">B-1-3-1</a></li>
            <li class="depth-3"><a href="#">B-1-3-2</a></li>
            <li class="depth-3"><a href="#">B-1-3-3</a></li>
            <li class="depth-2"><a href="#">B-1-4</a></li>
        </ul>
        <ul class="listCol3 megamenu">
            <li class="depth-3"><a href="#">B-1-4-1</a></li>
            <li class="depth-3"><a href="#">B-1-4-2</a></li>
            <li class="depth-3"><a href="#">B-1-4-3</a></li>
            <li class="depth-3"><a href="#">B-1-4-4</a></li>
            <li class="depth-3"><a href="#">B-1-4-5</a></li>
        </ul>
        <ul class="listCol4 megamenu">
            <li class="depth-2"><a href="#">B-1-5</a></li>
            <li class="depth-3"><a href="#">B-1-5-1</a></li>
            <li class="depth-3"><a href="#">B-1-5-2</a></li>
            <li class="depth-3"><a href="#">B-1-5-3</a></li>
            <li class="depth-3"><a href="#">B-1-5-4</a></li>
        </ul>
        <ul class="listCol5 megamenu last">
            <li class="depth-3"><a href="#">B-1-5-5</a></li>
        </ul>
    </div>
</li>

Answer 1

另一件应该有用的事情是通过将结果对象存储在变量中来消除冗余的jquery调用。例如，更改此：

$('ul#mainnav li ul li').each(function() {
    // add level class
    $(this).addClass('depth-'+$(this).parents('ul').length);
    // make uls siblings in stead of children
    $($(this).children('ul')).insertAfter($(this));
});

到此：

$('ul#mainnav li ul li').each(function() {
    var $this = $(this);
    // add level class
    $this.addClass('depth-'+$this.parents('ul').length);
    // make uls siblings in stead of children
    $($this.children('ul')).insertAfter($this);
});

注意当引用一个jquery对象时，使用$启动var名称的约定。

另外，我不确定，但我认为有一种更直接的方式可以附加到子列表中，这可能会简化上面代码的最后一行。也许像$ this.children（'ul'）。附加？

正如其他答案所说，只改变现场dom一次。另一种方法是克隆您正在处理的整个结构，操作克隆，然后用克隆替换原始结构。无论如何，关键是要避免浏览器尝试渲染每个更改。

Answer 2

您是否尝试在应用更改时隐藏列表，以便在每次更改后保存浏览器不必重排布局？

Answer 3

您可以做的一件事是为您的.megamenu选择器提供一个上下文。通过类名选择比通过id选择要长一些，因为在Javascript中没有本机功能。在选择器上设置范围有助于jQuery缩小对该类的元素的搜索范围。它看起来像这样：

$('.megamenu', $('#someelement'))

但在您的设置中可能无法实现。

另一件事是构建一个html字符串，您可以一次性附加到megamenu，而不是为列表中的每个LI运行append（）。如果你想减少插入DOM节点所需的时间，jQuery的append方法适用于大型HTML字符串。这似乎是这里最大的问题......你在循环中运行了很多DOM操作方法。你想尽可能减少尽可能多的这些。但是，除了构造一个html字符串以便一次性附加到megamenu（可能是ID，而不是类）之外，在脚本中可能无法做太多事情。

Answer 4

我今晚正在学习关于jQuery的负载......我尝试了一种完全不同的方法。之所以我想要所有列表项目的第二级和更深层次的兄弟姐妹是因为我想使用easylistsplitter插件。因为这吃了很多资源我创建了以下代码。我真的不需要列表项，谷歌不运行jQuery所以它会看到列表项，我的用户将看到一个整齐的小菜单，菜单项分为列。希望这段代码可以帮助其他人，它可以在第一段代码的一半时间内完成工作。

如果有人对此代码的编写速度更快，请告诉我们。

    $('ul#mainnav).each(function() {
    $(this).children('li').append('<div class="megamenu" />');
});
$('ul#mainnav').each(function() {
    var $this = $(this);
    var $length = $this.parents('ul').length;
    $this.addClass('depth-'+$length);
    if($length > 1) {
        $this.appendTo($this.parents('li').find('div.megamenu'));
    }
});
$('ul#mainnav ul').remove();
$('ul#mainnav div.megamenu').each(function() {
    var links = $(this).find('a');
    var columns = 5;
    var perCol = Math.ceil(links.length/columns);
    for(var i = 0; i < links.length; i+=perCol) { 
      links.slice(i, i+perCol).wrapAll('<div>'); 
    }
});

Answer 5

您是否尝试过使用以前版本的jQuery的.detach()类似的解决方法（因为detach是1.4特定的）？

具体来说this example可能有用（不确定，我不再使用1.2.6，请求者要求1.3.2解决方法）。

elem.clone(true);
elem.remove();

需要帮助加快这个jQuery过程

5 个答案: