En utilisant .getJSON pour retourner les images, puis de les envelopper dans des ancres
Question
Quelle est la meilleure façon d'envelopper un point d'ancrage avec le img src comme href dans ce code:
$(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;
});
});
});
Si le code HTML pourrait ressembler à quelque chose en sortie comme ceci:
<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>
Voici ce que je suis venu avec à ce jour:
<!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>
Toutes les idées?
La solution
$.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");
});
Autres conseils
Pourquoi ne toujours être un one-liner?
$.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);
}
Wow! Ce gars était rapide! En fait, je répondais à ma propre question après je l'ai demandé. A une doublure. Voici ce que je suis venu avec:
$.each(data.items, function(i, item){
$("<img/>").attr("src", item.media.m).appendTo("#images").wrap($("<a/>").attr("href", item.media.m));
});
Merci. À moins que des problèmes de performance, je ne suis pas au courant, je vais utiliser ma réponse.
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow