简单总结一下：

Question

昨晚在阅读jQuery Cookbook（Oreilly）的同时，我遇到了一个产生问题的函数，我似乎无法在书中找到或在线查找答案。我用于此问题的代码可以从jQuery site找到，我在下面将其作为参考：

<script>
    $(document.body).click(function () {
      $("div").each(function (i) {            //Where does the 'i' come from?
        if (this.style.color != "blue") {
          this.style.color = "blue";
        } else {
          this.style.color = "";
        }
      });
    });
</script>

我想知道'i'参数的来源和目的，因为我没有看到它来自哪里（客户端代码）以及它用于什么？作为一个Java人，我将在Java环境中熟悉方法或“函数”参数时更容易理解这个概念。

在这里，我没有看到客户端代码（我认为它在库中）并且我没有看到它（i）在函数中是如何相关的，因为它没有被引用。

社区有人可以为此做出明确的解释，或者请参考指南吗？

我理解每个函数的目的和'this'参考，所以你不需要解释这些，除非你觉得它与这个问题的未来观众有关。

Answer 1

在这种情况下，无需声明i。 each method的签名在jQuery文档中声明：

.each( function(index, Element) )

如您所见，它需要一个参数，该参数是一个带有2个参数的函数，index和Element。

在您的代码中，i是index的标识符，每次调用时都会通过jQuery传递给回调函数（每次迭代一次）。它还传递了第二个参数，但您没有声明它的标识符，因此只能通过arguments对象访问它。

通过记录arguments对象：

，您可以准确地看到传递给回调的内容

$("div").each(function () { //No arguments listed in callback signature...
    console.log(arguments); //But arguments are still passed
});

以上是working example以上内容。

这是relevant code from jQuery itself（已添加评论）：

//...
each: function( object, callback, args ) {
    //...

    //Iterate over the matched set of elements
    for ( ; i < length; ) {
        /* Call the callback in the context of the element, passing in the 
           index and the element */
        if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
            break;
        }
    }
}

Answer 2

当您致电$().each()时，您会将其传递给参考。 .each()函数的工作方式是，对于jQuery对象中的每个元素，它使用当前元素作为上下文调用您赋予它的函数（即在函数调用内部，this变量是当前要素）。

现在，当jQuery调用你给它的函数时，可以传递可选参数，就像你在代码中调用函数一样。使用.each()时，无论何时调用您给出的函数，它都会传递两个参数：索引和当前元素。

就像jQuery这样称呼它：

$('div').each(foo);

// results in something like
for(var i=0; i < $('div').length; i++) {

    // calling the foo function
    foo(i, $('div')[i]);

    // this is simplified, of course. 
    // this doesn't take into account the function context, or "this" variable.
}

你可能会发现the official documentation也更好地解释了它。

Answer 3

正如它在API中所说，'i'是索引。

如果你想在均匀和不均匀的元素之间做出改变，这可能是有用的

像：

$(document.body).click(function () {
  $("div").each(function (i) {            //Where does the 'i' come from?
    if (i % 2 == 0) {
      this.style.color = "blue";
    } else {
      this.style.color = "";
    }
  });
});

Answer 4

这些参数的“起源”是“让我们与prototype.js不同。”
由于索引很少需要，以相反的顺序传递参数更有意义。

考虑这个例子：
哪个电话＆amp;功能最有意义吗？

$('.my-selector').each( modifyNodeA );
$('.my-selector').each( function(){
    // this wrapper anonymous function is cruft
    modifyNodeB(this);
});
$('.my-selector').each( modifyNodeB ); // this one won't work
$('.my-selector').each( modifyNodeC );
$('.my-selector').each( function(){
    // just using 'this' makes sense here.. it's evident that this is a jQuery closure
});

function modifyNodeA(i, node) {
    // this one works...  but gotta have i in the func signature.
    //   it won't be used and doesn't make contextual sense
    //  can also use 'this', but where the heck did it come from..  it's not evident
}

function modifyNodeB(node, i) {
    // 'i' could/should be an optional 2nd param
    //   this function could function on it's own
}

function modifyNodeC() {
    // gotta use the magic 'this' scope var..  where did it come from?
    // contextually, it would be nice to have the var passed... it is... as the 2nd param!
}

简单总结一下：

Why I STILL prefer Prototype over jQuery - Section 8 - Other Nit-picks

$.each和$().each首先传递索引，然后将值传递给回调。这意味着如果我不需要索引，我就不能就像我在Prototype中所做的那样，让它离开函数声明。

了解jQuery $ each（）参数的来源？

4 个答案:

简单总结一下：