Jquery: Could someone explain this small snippet of code or give me a link to a good tutorial?

Question

What is the "index" part called, in function(index)? an event handler? or? what? and could someone explain to me why i need the "index" in "function(index)", i don't understand why it wouldn't work if I deleted the "index" part from "function(index)"

$("h2").each( 
    function(index) {
        $(this).css( "z-index", index*2+2 );
    });

Answer 1

It looks like it's incrementally increasing the z-index of all h2 elements by n*2+2 depending on their ordinal position in the page. Not sure what the purpose of such a piece of code would be but the end result would be each subsequent h2 tag having a greater z-index.

Based on the code, the equivalent inline CSS would be:

<h2 style="z-index: 4" />
<h2 style="z-index: 6" />
<h2 style="z-index: 8" />
<h2 style="z-index: 10" />
<h2 style="z-index: 12" />    
...

Answer 2

index is an integer, it mean the index of current object in that array. Read more about each function at http://api.jquery.com/each/
For easy to understand, you have 3 h2 tag

<h2>a</h2>
<h2>b</h2>
<h2>c</h2>

Then with $('h2'), there 2 object that match the selector When call $('h2').each(function(index){}) =>

index := 0 for <h2>a</h2>
index := 1 for <h2>a</h2>
index := 2 for <h2>a</h2>

Answer 3

The index is the argument (parameter) of the function.

You need the index to pass the value to the css() function's value parameter/argument. The index is incremented with each "loop" of the each() function.

The code basically moves the z-index of the element "forward"... Higher index z-element's will render on top of lower index z-elements. This might be used to animate a page, where you have a div element (for example) moving "forward".

Answer 4

This code iterates over all h2 tags on the page by using the each function from jQuery.

These tags are selected by using a CSS selector passed as the only argument to the $ function. This function also goes by another name -- jQuery -- which is what you'd use if you had jQuery.noConflict(); somewhere in your code.

The first argument passed to this each function is another function itself. This anonymously named function will be executed for each element of the h2 tag collection. The index argument inside this function is the position of the current iteration. The first element in this collection will have the index of 0, the next 1 and the next 2 and so on.

Inside this anonymous function inside the each, $(this) selects the current iteration's element, again by using the $ function. When css is called on $(this) it sets a specific CSS attribute (the first argument) which is in this case z-index to the value passed in as the second argument.

---

I hope this was detailed enough to explain what's going on.

Answer 5

Each calls the given function for every element in the collection - in this case, every <h2> element. The index parameter of the function is the index of the current element in the collection - the function will be called for the first <h2> with index 0, then the second <h2> with index 1, and so on. So this piece of code gives the first one a z-index of 2, the second a z-index of 4, the third a z-index of 6, and so on.

See http://api.jquery.com/each/

Answer 6

index is the position in the array of all h2 tags.

Because .each() iterates over all h2 tags, index is 0 for the 1st h2 in the DOM, 1 for the 2nd h2 and so on.