使用.getJSON返回圖像，然後將它們包裝在錨

什麼來包裝錨與IMG SRC本規範？：在href最簡單的方法使用.getJSON返回圖像，然後將它們包裝在錨

$(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>

任何想法？

來源

2010-01-20 Alfonse

$.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"); 
});

來源

2010-01-20 02:17:54 munch

爲什麼它總是必須是單行？

$.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); 
}

來源

2010-01-20 02:15:45 Anurag

+1爲更快 – munch 2010-01-20 02:19:12

謝謝。我仍然想知道一個jQuery的問題在9分鐘內沒有得到答覆。 – Anurag 2010-01-20 02:27:58

哈哈。其他人都在吃晚飯，我猜？ – munch 2010-01-20 02:41:15

哇！這是快速的傢伙！我問過之後，我確實回答了我自己的問題。一個班輪。這是我想出的：

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

});

謝謝。除非我沒有意識到性能問題，否則我會用我的答案。

來源

2010-01-20 02:42:13 Alfonse

使用.getJSON返回圖像，然後將它們包裝在錨

回答

相關問題