Question

我有一个包含许多Instagram图像的div，由instafeed.js插件生成。运行插件后，生成的HTML如下所示：

<div id="instafeed">
    <a><img /></a>
    <a><img /></a>
    <a><img /></a>
    etc...
</div>

我试图找到一种方法将此div的内容加载到数组中;我相信最简单的方法就是拿标签，这很好。

我对JS和jQuery都缺乏经验，这就是为什么我难以实现这一点而且我找不到任何能够完成我所做的事情的论坛帖子。我希望能够实现。

到目前为止，我所要做的就是将div的内容加载到一个数组中并将其打印回文档，这应该（在我看来）将标记添加回HTML。我尝试使用JavaScript和jQuery，但两者都没有成功。我很感激任何想法：

JS：

var containerDiv = document.getElementById('instafeed');
var pics = containerDiv.getElementsByTagName('img');

console.log(pics); //Tells me at least that I have an array of img

for (var i = 0; i < pics.length; i++) {
    document.write(pics[i]);
} //Seemingly does nothing

jQuery的：（我真的很抱歉，如果这个代码完全错了，我真的不太了解jQuery）

$(document).ready(function() {
    var pics = [];

    $('#instafeed').find('img').each(function() {
        pics.push($(this));
    });

    for (i = 0; i < pics.length; i++) {
        console.log(pics[i]);
    }

});

非常感谢任何想法，提示或指示。

编辑：只是为我的问题添加一些背景，以避免造成更多混乱。

我试图从用户特定的Instagram Feed中提取四张随机图片，以便在网站上显示。 instafeed.js可以只提取四个图像，它可以随机化图像，但Instagram本身总是发送四个最新的图像，所以插件只是随机化每次相同的四个图片的顺序。

我试图让插件通过每张照片发送，这将进入div instafeed。从这里开始，我想将所有包含的图像加载到一个数组中，这样我就可以随机选择四个图像在网站上显示。

Answer 1

您编写的JQuery代码是正确的。只有你需要放置图像的div。

$(document).ready(function() {
   var pics = [];

   $('#instafeed').find('img').each(function() {
      pics.push($(this));
   });

   for (i = 0; i < pics.length; i++) {
      $('div#yourDiv').append(pics[i]);
   }

}）;

查看for()

的行

您只能提取图像的SRC，然后按照您想要的方式制作

   $('#instafeed').find('img').each(function() {
      pics.push($(this).attr('src'));
   });
   console.log(pics); // returns an array of src.

Answer 2

感谢所有试图帮助我的人。事实证明，我的问题源于我的查询试图在instafeed.js之前运行的问题已经能够从Instagram中提取图像，因此在div中找不到它。我已设法通过setTimeout修复此问题。

对于任何有兴趣的人，以防万一其他人可能在将来遇到类似问题时，这是我的完整代码（它有点不雅我确定，但我＆＃39 ;我仍然是JS的相对新手。）

function snagImages() {
    var pics = [];

    $('div#instafeed').find('img').each(function() {
        pics.push($(this).attr('src'));
    });

    reduceGallery(4, pics);
}

function reduceGallery(limit, pics) {
    if (limit === undefined) {
        limit = 4;
    }

    var gallery = [];

    while (gallery.length < limit) {
        var j = Math.floor(Math.random() * pics.length);

        if ( gallery.indexOf(pics[j]) > -1) {
            continue;
        } 

        gallery.push(pics[j]);
    }

    displayPics(gallery);
}

function displayPics(gallery) {
    for (var i = 0; i < gallery.length; i++) {
        document.getElementById('gallery').innerHTML += '<a href="' + gallery[i] + '" title="Gallery Image">' + '<img src="' + gallery[i] + '" alt="Gallery Image" />' + '</a>';
    }
}

var userFeed = new Instafeed( {
    options
});
userFeed.run();

setTimeout(function() { snagImages() }, 500);

将元素div中的元素放入数组中 - jQuery或JavaScript

2 个答案: