Question

我认为提高jquery的性能应该避免使用，因为有些东西正在放慢一点。其中包括方法each()，并且使用for循环是合适的...（根据我读过的网络文章，方法each()大约比循环javascript大10倍） ..

我试图使用js，但我遇到了一些问题：/

Jquery的

$('#block-system-main-menu li').each(function () {      
        var text= ($(this).children('a').text());
        if (text == 'Map' || text== 'Vul' || text== 'Equa'){
            $(this).children('a').append('<span style="float:right; margin-right: 15%; line-height: inherit;" class="fa fa-chevron-right"></span>');
        }                   
    });

的Javascript

var voce= $('#block-system-main-menu li');
for(var i=0; i< voce.length; i++) {
        var text= (voce[i].children('a').text());           
        if (text == 'Map' || text== 'Vul' || text== 'Equa'){
            voce[i].children('a').append('<span style="float:right; margin-right: 15%; line-height: inherit;" class="fa fa-chevron-right"></span>');
        } 
    }

但循环不起作用，我不明白为什么......

谢谢！

Answer 1

你的问题就在这里。比较：

var text= ($(this).children('a').text());

使用：

var text= (voce[i].children('a').text());

在第一种情况下，您正在使用$(this)创建一个jquery对象。在第二种情况下，你不是。 voce[i]为您提供了一个HTML元素，该元素没有名为children的函数。所以你应该在那里得到一个错误。要使其工作，您需要从voce[i]创建一个jquery对象。类似的东西：

var text = $(voce[i]).children('a').text();

或者@GuerasArnaud在他的回答中建议：

var text= voce.eq(i).children('a').text();

但是，for与each很可能不会降低您的代码速度。实际上，您应该对代码进行概要分析并确定代码中的瓶颈。

当你读到＆＃34; x慢于y ＆＃34;这是你应该记住的事情，你也应该试着去理解它适用的地方和实际上重要的地方。在所有情况下，我都不会完全避免使用each，因为有时代码的便利性和可读性对于代码的非关键部分中代码性能的微优化更为重要。

另请注意，在您的linked tutorial中，您在for与each之间锁定了Cache. ALWAYS.点$(this)因此在您的jquery中您正在创建if对象的代码两次（虽然它在这种情况下并不那么重要，因为您没有使用选择器，这取决于您的true子句评估的频率到$('#block-system-main-menu li').each(function () { var children = $(this).children('a'); var text = children.text(); if (text == 'Map' || text== 'Vul' || text== 'Equa'){ children.append('<span style="float:right; margin-right: 15%; line-height: inherit;" class="fa fa-chevron-right"></span>'); } });，但它的成本仍然无法获得回报。）

如果你有这个，你的循环会更好：

for

或var voce= $('#block-system-main-menu li'); for(var i=0; i< voce.length; i++) { var children = $(voce[i]).children('a'); var text = children.text(); if (text == 'Map' || text== 'Vul' || text== 'Equa'){ children.append('<span style="float:right; margin-right: 15%; line-height: inherit;" class="fa fa-chevron-right"></span>'); } }循环：

voce.length

但是，除非=:= => A=:=String => A must be String <:< => A<:<String => A must be subtype of String 非常大，否则我怀疑你会发现真实世界的表现有任何重大差异。

Answer 2

voce是一个jQuery对象，但voce[i]是一个HTMLNode元素，它没有.children()方法。如果你想留在＆＃39; jquery喜欢＆＃39;你应该使用.eq()

var text= voce.eq(i).children('a').text();

Answer 3

所以我使用jQuery方法对jQuery for与固定的JS jQuery.each循环进行了基准测试，并添加了一个vanilla JS解决方案：http://jsperf.com/jquery-each-for-loop

在我的机器上for vs JS var voce = [].slice.call( document.querySelectorAll('#block-system-main-menu li')); /* prepare the span to use .appendChild instead of innerHTML += */ var span = document.createElement('span'); span.style.cssText = 'float:right; margin-right: 15%; line-height: inherit'; span.className = 'fa fa-chevron-right'; for(var i=0;i<voce.length;i++){ /* get the textContent with innerText fallback */ var text = voce[i].textContent || voce[i].innerText; if (text == 'Map' || text == 'Vul' || text == 'Equa') { /* forEach to keep compatibility with .children('a') method which returns a collection. Could be optimized further if you know you need to modify a single element */ [].forEach.call( voce[i].querySelectorAll('a'), function(a){ a.appendChild( span.cloneNode() ); }) } }彼此非常接近，而vanilla JS的表现相当可观。

没有jQuery的代码：

{{1}}

用javascript循环项目列表

3 个答案: