Instafeed 和 DOM 操作答案

【问题标题】：Instafeed and DOM manipulationInstafeed 和 DOM 操作
【发布时间】：2015-01-19 11:21:23
【问题描述】：

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

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 帖子的位置。我想在它自己的div 中添加一个关于 location 的geopin 图像，但如果 location 为空，我想隐藏图像.我可以通过编写这样的代码轻松做到这一点。

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

但由于我的模板中的所有 DIV 都不真正存在于 DOM 中，因此我无法向它们添加功能。这里有什么想法吗？

【问题讨论】：

标签： jquery dom instagram

【解决方案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();

【讨论】：