jQuery AJAX .each（）没有停止

Not sure if the title makes sense but here's my problem;

I currently use Dropbox to share family photos, trying to put them all into an HTML page in their own DIV based on their content.

I load them via a JSON file that looks like this

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

And using jQuery .ajax to load them

$(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();
});

It creates each DIV that's needed, but instead of putting each in their own they stack

birthday contains "birthday, camping, july fourth"

camping contains "camping, july fourth"

july fourth contains itself

How do I go about making it not contain each category after it?

I've actually figured out how to fix this, it was quite simple and a total derp on my end

I just changed the $('.gallery').append()s to $(this).append()

Also, I know the JSON wasn't great, I have fixed that.

$.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>');
        }
      }
    });
  });
});

Here it is.. Hopefully it's not too convoluted..

// 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();
        }
    });
});