使用 .getJSON 返回图像，然后将它们包装在锚点中
在这段代码中使用 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>
有什么想法吗？
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;
});
});
});
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>
Any ideas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
为什么它总是必须是一句台词？
Why does it always have to be a one-liner?
哇！伙计们，速度真快！我问完之后实际上回答了我自己的问题。一个衬垫。这就是我的想法：
谢谢。除非存在我不知道的性能问题，否则我将使用我的答案。
Wow! That was quick guys! I actually answered my own question after I asked it. A one liner. Here's what I came up with:
Thanks. Unless there are performance issues I'm not aware of, I'll use my answer.