Understanding the origin of jQuery $ each () parameters?

Question

While reading the jQuery Cookbook (Oreilly) last night, I came across every function that raises a question that I seem to be unable to find in the book, or on the Internet. The code I use for this question is found from the jQuery site , and I have included it below as a link:

<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 would like to know the beginning and purpose of the parameter “i”, because I do not see where it comes from (client code) and what is it used for? As a Java guy, I understand the concept a lot easier, as I am familiar with the parameters of a method or “function” in the context of Java.

Here I do not see the client code (I suppose this is in the library), and I do not see how it ( i ) matters in the function since it does not refer.

Can someone in the community give a clear explanation for this or give me guidance on this?

I understand the purpose of each function and the 'this' link, so you do not need to explain it if you do not consider this relevant for future viewers of this issue.

Answer 1

In this case, it was not necessary to declare i . The signature of each method is specified in jQuery docs:

.each( function(index, Element) )

As you can see, it takes one argument, and this argument is a function that takes 2 arguments, index and Element .

In your code, i is the identifier for index , which is passed to the jQuery callback function each time it is called (once for each iteration). It also passes the second argument, but you did not give it an identifier, so it will only be available through the arguments object.

You can see exactly what is being passed to the callback by registering this arguments object:

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

Here is a working example above.

Here's the corresponding code from jQuery itself (comments added):

 //... 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

When you call $().each() , you pass it a reference to the function. The way .each() works is that for each element in the jQuery object, it calls the function that you gave it with the current element as the context (i.e., inside the function call, the this variable is the current element).

Now, when jQuery calls the function you gave it, it can pass optional arguments as if you were calling the function in code. With .each() , whenever it calls the function you gave it, it passes two arguments: the index and the current element .

As if jQuery calls it like:

 $('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. } 

You may find that the official documentation also explains this better.

Answer 3

As the API says, "i" is an index.

This can be useful if you want to make the difference between even and unequal elements.

how

 $(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

The "origin" of these options is "let's be different from prototype.js".
It makes sense to pass parameters in the reverse order, since an index is rarely needed.

Consider this example:
Which call and function make the most sense?

 $('.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 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 not evident } function modifyNodeB(node, i) { // 'i' could/should be an optional 2nd param // this function could function on it 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! } 

Just summarizing here:

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

$.each and $().each both pass in an index first and then a callback value. This means that if I do not need an index, I can’t just leave it in the function declaration, as I can in Prototype.