需要帮助加速这个jQuery过程
需要帮助加速这个jQuery过程
提问于 2010-10-08 19:54:12
我创建了以下过程。基本上，它循环通过一个巨大的无序列表和多层嵌套列表，并创建一个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
});有什么想法吗？如果需要更多的信息，请告诉我！
干杯
编辑：
谢谢你的回复。还没试过所有的方法。使用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>
回答 5
Stack Overflow用户
发布于 2010-10-08 20:55:31
另一件应该有所帮助的事情是通过将结果对象存储在变量中来消除冗余的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').append？
正如其他答案所说，只改变一次活的世界。另一种方法是克隆您正在处理的整个结构，操作该克隆，然后用该克隆替换原始结构。不管你怎么做，关键是要避免浏览器试图在每次修改时呈现出来。
Stack Overflow用户
发布于 2010-10-08 20:10:28
您是否尝试在应用更改时隐藏列表，以避免浏览器在每次更改后不得不重新流布局？
Stack Overflow用户
发布于 2010-10-08 20:13:06
您可以做的一件事是为您的.megamenu选择器提供上下文。按类名选择比按id选择要长一些，因为在Javascript中没有本机函数可以这样做。在选择器上设置范围有助于jQuery缩小对该类元素的搜索范围。看起来是这样的：
$('.megamenu', $('#someelement'))但这在你的设置中可能是不可能的。
另一件事是构造一个html字符串，将其一次性添加到megamenu中，而不是为列表中的每个LI运行append()。如果您想减少插入DOM节点所需的时间，jQuery的append方法对大型HTML字符串非常有效。这似乎是这里最大的问题.在循环中运行许多DOM操作方法。你想尽可能多地减少这些，你可以在任何地方。但是，除了构造一个html字符串同时追加到megamenu (可能是ID，而不是类)之外，脚本中可能做不到什么。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3893864
复制相关文章
相似问题
腾讯云开发者
