使用javascript循环项目列表

我读到，为了提高jquery的性能，应该避免使用jquery，因为有些事情已经慢了一点。 其中包括方法

each（）

，使用for循环是合适的。。。（根据我读到的一篇web文章，方法

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

$（'#阻止系统主菜单li'）。每个（函数（）{
var text=（$（this.children（'a'）.text（））；
if（text='Map'| | text='Vul'| | text=='Equa'）{
$（this.children（'a'）。append（''）；
}                   
}); 

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

var voce=$（“#阻止系统主菜单li”）；
对于（变量i=0；i

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

---

谢谢

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

var text= ($(this).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(); 

然而，很有可能，的

与
的每一个
可能并不是降低代码速度的原因。实际上，您应该分析代码并确定代码中的瓶颈

当你读到“x比y慢”这句话时，你当然应该记住这句话，你也应该试着去理解它的适用性和重要性。我不会在所有情况下都完全避免
每一个
，因为有时代码的方便性和可读性比在非关键代码部分对代码性能进行微观优化更重要

还要注意的是，在您的中，您锁定了
for
vs
each
的点，但缺少
缓存点。始终。
因此，在jquery代码中，您将创建两次
$（this）
对象（尽管在这种情况下它并不那么重要，因为您没有使用选择器，这取决于
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>');
    }                   
}); 

但同样，除非
voce.length
非常大，否则我怀疑您在实际性能中是否会发现任何显著差异。
voce
是一个jQuery对象，但
voce[I]
是一个HTMLNode元素，并且它没有
.children（）
方法。如果您想保持“jquery-like”，应该使用
.eq（）

因此，我用jQuery方法对jQuery
每个
与固定的JS
for
循环进行了基准测试，并添加了一个普通的JS解决方案：

在我的机器上
jQuery。每个
vsfor
都非常接近，香草JS的表现都比这两个好很多

没有jQuery的代码：

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

var voce=[].slice.call（document.querySelectorAll（“#block system main menu li”）；
/*准备要使用的范围。appendChild而不是innerHTML+=*/
var span=document.createElement（'span'）；
span.style.cssText='浮点：右；右边距：15%；行高：继承'；
span.className='fa-fa-chevron-right'；
对于（var i=0；我在阅读类似的内容时，请记住，速度是非常快的东西的10倍，但仍然比其他可能会使页面速度变慢的东西快得多。如果循环中的
附加
比只执行
慢得多，我不会感到惊讶。每个
循环都不起作用
它做什么？它怎么“不工作”？它会给你带来错误吗？它什么都不做吗？它做的事情是否超出了你的预期？这个问题过去曾被问过。在for循环中检查例如
voce[i]。children（'a'）
应该抛出错误，因为节点没有
cildren（）
method:
uncaughttypeerror:voce[0]。children不是一个函数
。第一个方法是Jquery，第二个方法是Javascript。Jquery是一个Javascript库。你不能仅仅假设，因为Jquery实现了一些东西，Javascript也会这样做。
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>');
    } 
}

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

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