CODEWITHSUNDEEP
javascriptjquery
olo
olo

Reputation: 5271

Basic jQuery function

Could someone please explain, why do we need each(function (i) what does (i) do? seems like i could be any letters. why (i) is necessary? I don't quite understand. Many Thanks 

<body>
    <div>Click here</div>
  <div>to iterate through</div>
  <div>these divs.</div>
<script>
    $(document.body).click(function () {
      $( "div" ).each(function (i) {
        if ( this.style.color != "blue" ) {
          this.style.color = "blue";
        } else {
          this.style.color = "";
        }
      });
    });
</script>

Upvotes: 1

Views: 259

Answers (6)

Christophe
Christophe

Reputation: 28124

i,j,k are a standard notation for integers. It is naturally used for looping through enumerable lists (like arrays or nodelists) where each element index is an integer. For imbricated loops the first level will use i, the second j, etc.

This is just a convention and in practice you can use other names, for example "index" as shown in the jQuery documentation that makes your code more readable. The drawback is that it makes your script longer, but with today's widespread use of minification/compression this should not be a concern.

And of course if you don't reference the index within the loop you can just omit it.

Upvotes: 1

Chamila Chulatunga
Chamila Chulatunga

Reputation: 4914

.each is used for iterating over the collection of elements it is applied to. The first parameter (i, in your example) provides the index value of the current element within the collection.

The full signature is:

.each( function(index, Element) )

while you are using the overload of:

.each( function(index) )

And it doesn't really matter how you name the parameter in your function specification (index, i, blah, param1, etc), the index value will be passed into that parameter.

In your example, this parameter value provides no additional benefit as it is not required by your use case, however, there are plenty of use cases where it is an essential parameter.

Upvotes: 1

Guffa
Guffa

Reputation: 700342

The first parameter for the callback function is the index of the iteration in the loop. i.e. the loop counter. In your case you don't need it at all, as you are not using it:

$("div").each(function() {
  if (this.style.color != "blue") {
    this.style.color = "blue";
  } else {
    this.style.color = "";
  }
});

The second parameter is the element for the current iteration, i.e. the same as this is referring to. You could use that parameter instead of this. Of course, to use the second parameter you have to specify the first parameter also, even if you don't use it:

$("div").each(function(i, e) {
  if (e.style.color != "blue") {
    e.style.color = "blue";
  } else {
    e.style.color = "";
  }
});

Upvotes: 3

m0s
m0s

Reputation: 4280

Well, I don't know if this is what you are asking but according to documentation

.each( function(index, Element) )

That's the signature, so i in your case would be the argument for the index of current item. So if there 10 things in your div, every time the function is called it would pass the index i for i-th element in your div.

Upvotes: 1

albertosh
albertosh

Reputation: 2526

You can call i whatever you want in the callback function, the each method will call that callback for each object that matches your each selector (In your case all divs) and will pass it to your callback parameter (i) or whatever you call so you can manipulate each of those objects for each iteration.

Hope i made myself clear,

Cheers

Upvotes: 1

Peter Wooster
Peter Wooster

Reputation: 6089

That can be any name you want, it's the index of The item, in case that's useful in the function. It's explained in the jQuery documentation. http://api.jquery.com/each/

Upvotes: 1

Related Questions