Question

I’m trying to understand this jquery code, I understand all of it: the modulo, loop etc., except for what “i” means in .each(function(i). I’ve tried searching but this code doesn’t return good search results. Does it represent each img that has an id of #photos? If so isn’t that the same as the variable currentPhoto. Any help with understanding this or a link to useful info would be greatly appreciated.

function rotatePics(currentPhoto) {  //number is index of current photo
  var numberOfPhotos = $('#photos img').length;
  currentPhoto = currentPhoto % numberOfPhotos;

  $('#photos img').eq(currentPhoto).fadeOut(function() {
    // re-order the z-index
$('#photos img').each(function(i) {
  $(this).css(
    'zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos
  );
});
$(this).show();
setTimeout(function() {rotatePics(++currentPhoto);}, 4000);
  });
}

Thanks in advance!

Edit:
In case anyone going through the jquery: novice to ninja book has the same doubts:
(i) is 0 based and currentPhoto is 1 based, so for example the 1st img element would look like this(assuming there are 6 photos total):

((6        -       0) +      1        %     6
((numberOfPhotos - i) + currentPhoto) % numberOfPhotos 

always adding 1 makes sure the remainder is always 1, thus making sure that the z-index is always 1.

Thanks for everybodies help!

Answer 1

i is the index position of the current element within the jquery collection