使用.getJSON返回图像，然后将它们包装在锚点中 [英] Using .getJSON to return images and then wrap them in anchors
本文介绍了使用.getJSON返回图像，然后将它们包装在锚点中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用img src作为此代码中的href包装锚的最简单方法是什么？：
What's the easiest way to wrap an anchor with the img src as the href in this 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;
});
});
});
如果输出的HTML代码看起来像这样：
It would be great if the outputted HTML code could look something like this:
<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>
这是我到目前为止所提出的：
Here is what I've come up with so far:
<!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>
任何想法？
推荐答案
$.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");
});
这篇关于使用.getJSON返回图像，然后将它们包装在锚点中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
