如何使用 jQuery 将图像注入到从 API 提取的图像列表中？

发布于 2024-11-30 07:21:14 字数 1153 浏览 0 评论 0原文

查看此网址时 http://dl.dropbox.com/u/1550420/jquery /flickr.html，我们看到从 API (flickr) 提取的图像列表。

我想注入以下图像 http://dl.dropbox。 com/u/1550420/jquery/chicago-008.jpg 到我的列表的第三个位置，从而增加了我的列表的长度。

总之，列表将在第 3 个位置插入 1 个图像。该图像将来自唯一的 url，而不是来自同一个 API。

我该如何做到这一点？

这是我的代码，以防上面的链接不起作用：

<script>
    $(document).ready(function() {
        $.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=675729@N22&lang=en-us&format=json&jsoncallback=?", function(data){
          $.each(data.items, function(){
            var raffie = '<a href="' + this.link + '"></a>';
            $('<li></li>')
            .append(raffie)
            .appendTo('#pic');
            $('<img />').attr('src', this.media.m)
            .appendTo('#pic');
          });
        });
    });
</script>

这是正文中的硬编码 html：

<ul><li id="pic"></li></ul>

原文

When viewing this url http://dl.dropbox.com/u/1550420/jquery/flickr.html, we see a list of images pulling from an API (flickr).

I’d like to inject the following image http://dl.dropbox.com/u/1550420/jquery/chicago-008.jpg into the 3rd position of my list, thus increasing the length of my list.

In summary, the list would have 1 image inserted into it at the 3rd position. The image would come from a unique url, not from the same API.

How do I accomplish that?

Here's my code, in case the link above doesn't work:

<script>
    $(document).ready(function() {
        $.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=675729@N22&lang=en-us&format=json&jsoncallback=?", function(data){
          $.each(data.items, function(){
            var raffie = '<a href="' + this.link + '"></a>';
            $('<li></li>')
            .append(raffie)
            .appendTo('#pic');
            $('<img />').attr('src', this.media.m)
            .appendTo('#pic');
          });
        });
    });
</script>

and here's the hard-coded html from the body:

<ul><li id="pic"></li></ul>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

〃温暖了心ぐ 2024-12-07 07:21:14

将所有图像附加到 DOM 后，您应该选择第二个图像，并在其后面插入其他图像：

$('#pic img:eq(1)').after('<li><img src="http://dl.dropbox.com/u/1550420/jquery/chicago-008.jpg" /></li>');

这是小提琴： http://jsfiddle.net/LbtWJ/。

PS 你不应该将图像单独附加到 DOM，但这不是重点。

After you're done appending all your images to the DOM, you should select the 2nd image, and insert that other image after it:

$('#pic img:eq(1)').after('<li><img src="http://dl.dropbox.com/u/1550420/jquery/chicago-008.jpg" /></li>');

Here's the fiddle: http://jsfiddle.net/LbtWJ/ .

P.S. You shouldn't be appending your images to the DOM separately, but that's besides the point.

回复收藏 0 原文

垂暮老矣 2024-12-07 07:21:14

在您的代码中，它看起来像是将 li 附加到另一个 li 中，这是不允许的。

这个怎么样。标记如下所示：（

并不是真正必要的，因为我们要覆盖它，但这样页面就可以验证）

<ul id="pic"><li></li></ul>

然后 JS 代码如下所示：

<script type="text/javascript">
    $(document).ready(function() {
        $.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=675729@N22&lang=en-us&format=json&jsoncallback=?", function(data)
        {
            var html = '';
            $.each(data.items, function()
            {
               // Avoid appending to document DOM multiple times to improve performance
               html += '<li><a href="' + this.link + '"><img src="' + this.media.m + '"/></a></li>')
            });
            // 3rd hardcoded image
            html += '<li><a href="#"><img src="http://dl.dropbox.com/u/1550420/jquery/chicago-008.jpg"/></a></li>';

            // Now put it into the page
            $('#pic').html(html);
        });
    });
</script>

In your code, it looks like appending li into another li, which is not allowed.

How about this. Markup looks like this: (<li> is not really necessary since we are overwriting it, but this way page validates)

<ul id="pic"><li></li></ul>

Then the JS code looks like this:

<script type="text/javascript">
    $(document).ready(function() {
        $.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=675729@N22&lang=en-us&format=json&jsoncallback=?", function(data)
        {
            var html = '';
            $.each(data.items, function()
            {
               // Avoid appending to document DOM multiple times to improve performance
               html += '<li><a href="' + this.link + '"><img src="' + this.media.m + '"/></a></li>')
            });
            // 3rd hardcoded image
            html += '<li><a href="#"><img src="http://dl.dropbox.com/u/1550420/jquery/chicago-008.jpg"/></a></li>';

            // Now put it into the page
            $('#pic').html(html);
        });
    });
</script>

回复收藏 0 原文

~没有更多了~