jQuery AJAX .each()没有停止

时间:2015-07-14 06:14:37

标签: javascript jquery html ajax

不确定标题是否有意义,但这是我的问题;

我目前使用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放在他们自己的堆栈中

生日包含&#34;生日,露营,7月4日&#34;

野营包含&#34;露营,7月4日&#34;

7月4日包含自己

如何让它不包含每个类别?

2 个答案:

答案 0 :(得分:0)

我实际上已经弄明白了如何解决这个问题,这很简单,而且我的结局总是很明显

我刚刚将$(&#39; .gallery&#39;)。append()s更改为$(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>');
        }
      }
    });
  });
});

答案 1 :(得分:0)

这是..希望它不会太复杂..

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