jQuery AJAX .each（）没有停止

Question

不知道标题是否有意义，但这是我的问题。

我目前使用Dropbox共享家庭照片，试图根据它们的内容将它们全部放入自己的DIV中的HTML页面中。

我通过一个看起来像这样的JSON文件加载它们

[
    {
        "Birthday": "10"
    },
    {
        "Camping": "20"
    },
    {
        "July Fourth": "50"
    }
]

并使用jQuery .ajax加载它们

$(document).ready(function () {
  $.ajax({
    url: 'events.json',
    success: function(response) {
      $.each(response, function() {
        $.each(this, function(name, photos) {
          $('#container').append('<div class="gallery" name="' + name + '"></div>');
          $('div[name="' + name + '"').append(function() {
            for ( var i = 1; i <= photos; i++) {
              if (i < 10) {
                $('.gallery').append('<a class="fancybox" rel="' + this + '" href="' + name + '/0' + i + '.jpg"><img class="img" src="' + name + '/0' + i + '.jpg" /></a>');
              } else {
                $('.gallery').append('<a class="fancybox" rel="' + this + '" href="' + name + '/' + i +'.jpg"><img class="img" src="' + name + '/' + i + '.jpg" /></a>');
              }
            }
          });
        });
      });
    }
  });
  $(".fancybox").fancybox();
});

它创建所需的每个DIV，但不是将每个DIV放在各自的堆栈中

生日包含“生日，露营，7月4日”

露营包含“露营，7月4日”

七月四日本身

如何使它不包含后面的每个类别？

Answer 1

我实际上已经想出了解决方法，这很简单，而且最终总收益

我只是将$（'。gallery'）。append（）更改为$（this）.append（）

另外，我知道JSON不好，我已经解决了。

$.getJSON("events.json", function(data) {
  $.each(data, function(index, d) {
    var name = d.name;
    var photos = d.count;
    $('#container').append('<div class="gallery" name="' + name + '"></div>');
    $('div[name="'+name+'"]').append(function() {
      for ( var i = 1; i <= photos; i++) {
        if (i < 10) {
          $(this).append('<a class="fancybox" rel="' + this + '" href="' + name + '/0' + i + '.jpg"><img class="img" src="' + name + '/0' + i + '.jpg" /></a>');
        } else {
          $(this).append('<a class="fancybox" rel="' + this + '" href="' + name + '/' + i +'.jpg"><img class="img" src="' + name + '/' + i + '.jpg" /></a>');
        }
      }
    });
  });
});

Answer 2

就是这里。希望它不会太复杂。

// Kind of necessary in the way my solution works
function getPropertyName(prop, value) {
    for (var i in prop) {
        if (prop[i] == value) {
            return i;
        }
    }
    return false;
}

$(document).ready(function () {
    $.ajax({
        url: 'events.json',
        success: function(response) {
            $.each(response, function( index, gallery ) {
                // gallery[Object.keys(gallery)[0]] gets the first property of the gallery object
                var galleryName = getPropertyName(gallery, gallery[Object.keys(gallery)[0]]);
                var numPhotos = parseInt(gallery[galleryName]);

                // I used 'data-name' instead of 'name' as the attribute to keep it more in line with the HTML standard
                $('#container').append('<div class="gallery" data-name="' + galleryName + '"></div>');

                for (var i = 1; i <= numPhotos; i++) {
                    $('div[data-name="' + galleryName + '"').append(function() {
                        if (i < 10) {
                            $(this).append('<a class="fancybox" href="' + galleryName + '/0' + i + '.jpg"><img class="img" src="' + galleryName + '/0' + i + '.jpg" /></a>');
                        } else {
                            $(this).append('<a class="fancybox" href="' + galleryName + '/' + i +'.jpg"><img class="img" src="' + galleryName + '/' + i + '.jpg" /></a>');
                        }
                    });
                };
            });
            $('.fancybox').fancybox();
        }
    });
});