How to assign a unique number to every object returned in a jQuery each loop?

Question

I'm using AJAX to call a Flickr JSON file that brings in all of my photo data. The data then runs through an each loop where variables are collected which are then used to concatenate a string for each photo and write them into a custom lightbox.

For the lightbox, I am using this W3 lightbox tutorial as the container for the photos.

My question is how do I create a number variable and assign it to the objects in my each loop so that I can create something like this:

onclick="openModal();currentSlide(foo)"

For example, if there are 5 objects in my each loop, I want each to be assigned a variable starting with 1 and increasing to 5.

//Call all images from Flickr

var photoSettings = {
  "async": true,
  "crossDomain": true,
  "url": "https://api.flickr.com/services/rest/?method=flickr.photos.search&...&format=json&nojsoncallback=1",
  "method": "GET",
  "headers": {}
}

$.ajax(photoSettings).done(function (data2) {

$.each( data2.photos.photo, function( i, gp ) {

        var farmId2 = gp.farm;
        var serverId2 = gp.server;
        var id2 = gp.id;
        var secret2 = gp.secret;
        var title2 = gp.title;
        var description2 = gp.description._content;

        $('.flickrContain').on('click', function() {

            if ($(this).attr('alt') == '2017—Yonge St., Richmond Hill'){
                if ((title2.indexOf( 'Y2' )> -1) && (title2.indexOf( '2017' )> -1)){

                    var foo = assign a number to each of the conditional objects 

                    //main image slider
                    $('.image-slider').append('<div class="mySlides"><img src="https://farm' + farmId2 + '.staticflickr.com/' + serverId2 + '/' + id2 + '_' + secret2 + '.jpg" width="100%" alt="' + description2 + '" title="' + description2 + '" id="H2BandC-2017-' + id2 + '"/></div>');

                    //thumnails
                    $('.image-list').append('<li class="flickrSliderImg"><a href="#H2BandC-2017-' + id2 + '"><img class="demo" src="https://farm' + farmId2 + '.staticflickr.com/' + serverId2 + '/' + id2 + '_' + secret2 + '.jpg" alt="' + description2 + '" title="' + description2 + '" width="160px" height="90px" border="0" onclick="currentSlide(' + foo + ')"/></a></li>');
                };
            } else if ($(this).attr('alt') == '2016—Yonge St., Richmond Hill'){
                    if ((title2.indexOf( 'Y2' )> -1) && (title2.indexOf( '2016' )> -1)){

                        var foo = assign a number to each of the conditional objects

                        //main image slider
                        $('.image-slider').append('<div class="mySlides"><img src="https://farm' + farmId2 + '.staticflickr.com/' + serverId2 + '/' + id2 + '_' + secret2 + '.jpg" width="100%" alt="' + description2 + '" title="' + description2 + '" id="H2BandC-2016-' + id2 + '"/></div>');

                        //thumnails
                        $('.image-list').append('<li class="flickrSliderImg"><a href="#H2BandC-2016-' + id2 + '"><img class="demo" src="https://farm' + farmId2 + '.staticflickr.com/' + serverId2 + '/' + id2 + '_' + secret2 + '.jpg" alt="' + description2 + '" title="' + description2 + '" width="160px" height="90px" border="0" onclick="currentSlide(' + foo + ')"/></a></li>');

                }
            }
        });
    });
});

Answer 1

From the docs you can see that when you call each, you can define an index parameter for the function you pass to it:

jQuery.each( arr, function( index, val ) {
  $( "#" + val ).text( "Mine is " + val + "." );

  // Will stop running after "three"
  return ( val !== "three" );
});