使用 .getJSON 返回图像，然后将它们包装在锚点中答案

【问题标题】：Using .getJSON to return images and then wrap them in anchors使用 .getJSON 返回图像，然后将它们包装在锚点中
【发布时间】：2015-06-30 23:49:38
【问题描述】：

在这段代码中，用 img src 作为 href 包装锚点的最简单方法是什么？：

$(function(){
   $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=tree&tagmode=any&format=json&jsoncallback=?", 
       function(data){
       $.each(data.items, function(i, item){
        $("<img/>").attr("src", item.media.m).appendTo("#images");

            if (i == 3) 
                       return false;    
   }); 
 }); 
});

如果输出的 HTML 代码看起来像这样，那就太好了：

<div id="images">
    <a href="...888_m.jpg"><img src="...888_m.jpg"></a>
    <a href="...373_m.jpg"><img src="...373_m.jpg"></a>
    <a href="...a17_m.jpg"><img src="...a17_m.jpg"></a>
    <a href="...c51_m.jpg"><img src="...c51_m.jpg"></a>
</div>

这是我目前的想法：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <title>JSON Example</title>
        <script type="text/javascript" src= "http://code.jquery.com/jquery-latest.js">
        </script>

        <script type="text/javascript">
            $(function(){
                $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=tree&tagmode=any&format=json&jsoncallback=?", 
                    function(data){
                    $.each(data.items, function(i, item){

                        $("<img/>").attr("src", item.media.m).appendTo("#images"); 

                    if (i == 3) 
                            return false; //return 4 images then stop   


                });     

                var imgs = document.getElementsByTagName("img"); //build imgs array

                for (var i=0; i<imgs.length; i++) {
                    source = imgs[i].getAttribute("src"); // grabs the img src attributes 
                    //build anchors with attributes href and title
                    $("<a>").attr({ 
                        href: source,
                        title: "Courtesy of Flicker"
                    }).appendTo("#images"); //injects anchors into "images" div

                    /**********************
                     then I'm stuck. Although everything so far is working, 
                     I need to rewrite the code inserted into the DOM at this point
                     so that the images are wrapped by the anchors. 

                    **********************/

                };
            });

        });
        </script>
        <style type="text/css">
            img {
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="images">  </div>
    </body>
</html>

有什么想法吗？

【问题讨论】：

标签： jquery getjson

【解决方案1】：

为什么总是单线？

$.each(data.items, function(i, item){
    var image = $("<img/>").attr("src", item.media.m);
    var link = $("<a>").attr("href", item.media.url);
    link.append(image);
    $("#images").append(link);
}

【讨论】：

谢谢。我仍然想知道一个 jquery 问题是如何在整整 9 分钟内无人回答的。
你们摇滚！两个答案都很棒。我还将它们包含在我的示例中，因为它们让我更好地了解了如何使用 jQuery。谢谢你们。

【解决方案2】：

$.each(data.items, function(i, item){
   var img = $("<img/>").attr("src", item.media.m);
   $("<a/>").attr({href: item.media.m, title: "Courtesy of Flicker"})
      .append(img).appendTo("#images");
});

【讨论】：

【解决方案3】：

哇！那是快的家伙！在我提出问题后，我实际上回答了我自己的问题。一个班轮。这是我想出的：

$.each(data.items, function(i, item){
 $("<img/>").attr("src", item.media.m).appendTo("#images").wrap($("<a/>").attr("href", item.media.m));

});

谢谢。除非有我不知道的性能问题，否则我会使用我的答案。

【讨论】：