通过 API 获取 tumblr 照片 post 内容，但对 photoset posts 进行不同的排列

Question

我有一些代码目前循环遍历博客上的 posts 并将它们输出为列表项内的图像，带有 link 和标题文本（如果存在）。这工作正常，但是当我运行代码并且有照片集 posts 时，每个图像和标题都会按照照片博客 posts 进行循环。

（因此，如果照片集中有 10 张图像和 1 个标题，则每个图像和标题都会输出 10 次）。

这是我的原始代码：

// get tumblr posts and embed them. 
var postContent     = $('#tumblr-posts');
var getPosts = {};
getPosts.get = function(){
    var offSet = href * 10;
    $.ajax({
        url:"http://api.tumblr.com/v2/blog/jessicaharby.tumblr.com/posts?limit=11",
        dataType: 'jsonp',
        data: {
            api_key: _site._apiKey,
            tag: 'news',
            offset: offSet
        },
        success: function(results){
            var i = 0;
            while (i < results.response.posts.length) {
                var type = results.response.posts[i].type;
                var photoset = results.response.posts[i].photoset_layout;
                if (type == "photo") {
                    var photos = results.response.posts[i].photos;
                    var linkURL = results.response.posts[i].post_url;
                    var caption = results.response.posts[i].caption;
                    for (var j = 0; j < photos.length; j++) {
                        var imgURL;
                        if (photos[j].alt_sizes[1]) {
                            imgURL = photos[j].alt_sizes[1].url
                        }else{
                            continue;
                        }
                        postContent.append("<li><img src=" + imgURL + " /><p>" + caption + "</p></li>");
                    }
                i++;
            }
            console.log(results.response);
            postContent.find('a').attr('target','_blank');
        }
    });
}

getPosts.get();

我一直在尝试编写一个 else if 语句来捕获照片集 posts。它需要改进，但看起来像这样：

else if(photoset != null) {
    for (var k = 0; k < photos.length; k++) {
        var imgURL;
        if (photos[k].alt_sizes[1]) {
            imgURL = photos[k].alt_sizes[1].url
        }else{
            continue;
        }
        postContent.append("<li><img src=" + imgURL + " /></li>");
    }
    postContent.append("<li><p>" + caption + "</p></li>");
 }else{
    console.log('some error')   
}

所以它应该吐出所有图像和 post 底部的一个标题（所以我想我需要将这些全部放在一个列表项中）。我只是不是 100% 确定如何完成循环。

另一个问题是，如果我写一个 if/else if 我认为我当前的代码第一个 if 是真的，那么 posts 可能会重复，或者 else if 可能是忽略。

我有两个可以试验的小提琴with/forked等；

1) http://jsfiddle.net/lharby/bLveggwk/1/ 遍历所有 posts

2) http://jsfiddle.net/lharby/bLveggwk/3/ 仅循环遍历照片集 posts。

抱歉，这不是最简洁的问题。如果我不清楚我可以画图如果有帮助！

编辑

决定制作图片：

Answer 1

我不确定我是否理解了这个问题，顺便说一句，这个解决方案 http://jsfiddle.net/1bLrocj1/ 有效吗？

重要部分：

var set = [];
while (i < results.response.posts.length) {
    var type = results.response.posts[i].type;
    var photoset = results.response.posts[i].photoset_layout;
    if (photoset != null) {
        var photos = results.response.posts[i].photos;
        var linkURL = results.response.posts[i].post_url;
        var caption = results.response.posts[i].caption;
        for (var j = 0; j < photos.length; j++) {
            var imgURL;
            if (photos[j].alt_sizes[1]) {
                imgURL = photos[j].alt_sizes[1].url
            } else {
                continue;
            }
            set.push("<li><img src=" + imgURL + " /></li>");
        }
        if (caption) {
            set.push("<li><p>" + caption + "</p></li>");
            var subUl = document.createElement("ul");
            for (var k = 0; k < set.length; k++) {
                $(subUl).append(set[k]);
            }
            postContent.append(subUl);
            set.length = 0;
        }
    } else {
        console.log('some error')
    }
    i++;
}

css:

ul li {
    padding:20px;
    float:left;
    max-width:550px;
    background:#FFF;
}

ul li:last-child {
    margin:0 1px 30px 0;
}

通过 API 获取 tumblr 照片 post 内容，但对 photoset posts 进行不同的排列

Get tumblr photo post content via API but arrange it differently for photoset posts

javascript

ajax

jquery

loops

tumblr