Instafeed 和 DOM 操纵

Question

我正在使用 Instafeed.js 从 Instagram 中提取图像。它工作得很好。这是工作项目的 link。

http://www.craftysnaps.com

问题是，我无法 jQuery 进行功能更改。这是我用来将图像附加到名为 #content.

的 div 的内容

var feed = new Instafeed({  
    target: 'content',  
    get: 'tagged',
    tagName: 'craftysnaps',
    clientId: 'c57635b97e7440dd8bacf38304db4e07',
    resolution: 'standard_resolution',
     template: '<article><img src="{{image}}" /><div class="likes">{{likes}}</div><div class="location">{{location}}</div><div class="caption">{{caption}}</div><div class="more"><a href="{{link}}" target="_blank"><img src="images/more.png" /></div></a></article>'
    });     
feed.run();

在模板部分，我调用了 instagram 的位置 post。我想在 location 的 div 附近添加 geopin 图片，但是如果 location为空我想隐藏图像。我可以通过编写类似这样的代码轻松地做到这一点。

if($(".location").html().length ==0){
   $(".hidethisimage").hide();
}

但是由于我模板中的 none 个 DIV 确实存在于 DOM 中，所以我无法向它们添加功能。这里有什么想法吗？

Answer 1

未测试，但我假设您可以使用 Instafeed 的 after 回调在元素（动态）添加到 DOM 后操作元素，例如

var feed = new Instafeed({
    target: 'content',
    get: 'tagged',
    tagName: 'craftysnaps',
    clientId: 'c57635b97e7440dd8bacf38304db4e07',
    resolution: 'standard_resolution',
    template: '<article><img src="{{image}}" /><div class="likes">{{likes}}</div><div class="location">{{location}}</div><div class="caption">{{caption}}</div><div class="more"><a href="{{link}}" target="_blank"><img src="images/more.png" /></div></a></article>',
    after: function () {
        if ($(".location").is(":empty")) {
            $(".location").parent("article").hide();
        }
    }
});
feed.run();

Instafeed 和 DOM 操纵

Instafeed and DOM manipulation

jquery

dom

instagram