如何为 jQuery 每个循环中返回的每个对象分配一个唯一编号？

Question

我正在使用 AJAX 调用 Flickr JSON 文件，该文件包含我所有的照片数据。然后数据通过每个循环运行，其中收集变量，然后用于连接每张照片的字符串并将它们写入自定义灯箱。

对于灯箱，我使用 this W3 lightbox tutorial 作为照片的容器。

我的问题是如何创建一个数字变量并将其分配给每个循环中的对象，以便我可以创建如下内容：

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

例如，如果我的每个循环中有 5 个对象，我希望为每个对象分配一个从 1 开始并增加到 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

从docs可以看出，调用each时，可以为传递给它的函数定义一个index参数：

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

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

Answer 2

谢谢@LajosArpad！你把我送到了正确的方向。以下代码用于将缩略图的索引值放入 currentSlide();

$('img.demo').each(function (index){
    $(this).attr('onclick', 'currentSlide(' + index + ')');
});

我也将上面的.append代码重写为：

.append('...onclick=""...')

如何为 jQuery 每个循环中返回的每个对象分配一个唯一编号？

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

javascript

ajax

jquery

flickr