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?

查看全部
weixin_33749242
weixin_33749242
2015/07/14 06:14
  • html
  • ajax
  • javascript
  • jquery
  • 点赞
  • 收藏
  • 回答
    私信

2个回复