jQuery $().each vs $.each() vs for 循环答案

【问题标题】：jQuery $().each vs $.each() vs for loopjQuery $().each vs $.each() vs for 循环
【发布时间】：2014-10-19 18:17:06
【问题描述】：

我是 JS 和 Query 的新手，所以我认为这是一项非常简单的任务，我只想从 $.each() 中重写 "loop" 进行测试> 到 $().each() 和 for 循环。这是我的代码。

var tab = ["John", "Steve", "Ben", "Damon", "Ian"],
    $list = $('#list');

$.each(tab,function(index,value){
    $list.append("<li>"+ value+ "</li>");
});

第二个和第三个循环不起作用：

tab.each(function(index){
    $list.append("<li>"+ tab[index] + "</li>");
});

和

for (var i,len=tab.length;i<len;i++) {
    $list.append("<li>"+ tab[i]+ "</li>");
}

怎么了？

【问题讨论】：

没有区别。有吗？
变量 i 未在 for 循环中初始化。
并且$.each和$(..).each()是有区别的，在第一种情况下，jQuery期望第一个参数是一个数组，并会执行回调数组中的每个元素。其次，jQuery 将选择文档中符合指定条件的元素，然后遍历每个匹配的元素。如果没有元素（很可能没有，因为您正在尝试添加它们），则不会在指定的 .each() 操作中执行任何操作。

标签： jquery loops for-loop each

【解决方案1】：

你需要在

中改成var i=0, len=tab.length

for (var i,len=tab.length;i<len;i++) {
    $list.append("<li>"+ tab[i]+ "</li>");
}

【讨论】：

【解决方案2】：

for循环正确初始化出错：

for (var i,len=tab.length;i<len;i++) {
//-------^ - Missing inital value.
    $list.append("<li>"+ tab[i]+ "</li>");
}

改为：

for (var i=0,len=tab.length;i<len;i++) {
    $list.append("<li>"+ tab[i]+ "</li>");
}

第二个不起作用，因为tab 不是要迭代的 jQuery 对象！ :) $.each 的语法是：

$.each(dataArray, function() { });

或者，如果你有一个 DOM jQuery 对象：

$(Selector).each(dataArray, function() { });

【讨论】：

是的，你说得对！ “$(selector).each()，用于以独占方式遍历 jQuery 对象。”
2个小点。不初始化 i 不是语法错误。这是完全有效的语法，但会产生意想不到的结果。了解为什么未初始化的 i 给出意外结果也很重要： (undefined
@bstakes 相应地更新了答案。 :)
你的代码示例比我单独的解释提供了更好的上下文，你得到了我的支持。

【解决方案3】：

如果您正在迭代 Javascript 数组，而不是 jQuery 选择，则必须使用 $.each，这就是它的工作方式。

至于你的第三个例子，我需要用 0 初始化。否则它是未定义的，与数组的长度相比总是错误的。

【讨论】：

由于 kuba0506 自称是 JS 初学者，所以你用更正的例子和解释性知识帮助了他更多。

【解决方案4】：

根据jQuery的文档：

$.each() 函数与 $(selector).each() 不同，后者用于以独占方式遍历 jQuery 对象。 $.each() 函数可用于迭代任何集合，无论是对象还是数组。在数组的情况下，回调每次都会传递一个数组索引和一个对应的数组值。（该值也可以通过 this 关键字访问，但 JavaScript 总是将 this 值包装为一个 Object，即使它是一个简单的字符串或数字值。）

还有see here:

以下是您需要记住的：

在 jQuery 选择上调用的方法位于 $.fn 命名空间中，并自动接收并以 this 形式返回选择。
$ 命名空间中的方法通常是实用程序类型的方法，并且不适用于选择；它们不会自动传递任何参数，它们的返回值会有所不同。

【讨论】：

【解决方案5】：

将您的 JS 数组包装成一个 jQuery 对象，以便能够在其上调用每个对象：

$(tab).each(function(){
  $list.append("<li>"+ this + "</li>")
})

并将您的运行变量初始化为零 (i=0)，此外，出于可读性原因，您不应将 tab.length 存储到临时变量中：

for(var i=0; i<tab.length; i++) {
  $list.append("<li>"+ tab[i]+ "</li>") 
}

【讨论】：

tab 不是 jQuery 集合，所以这不起作用。
使用 $() 包装标签正在生成一个 jQuery 对象，用于使用 each() 进行迭代。
好的，看起来更好。不是最好的方法，但它确实有效。

【解决方案6】：

试试这个，

var tab = ["John", "Steve", "Ben", "Damon", "Ian"];
    for(i=0;i<=tab.length;i++)
    {
        alert(tab[i]);
    }

【讨论】：