什么来包装锚与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>
任何想法?
+1为更快 – munch 2010-01-20 02:19:12
谢谢。我仍然想知道一个jQuery的问题在9分钟内没有得到答复。 – Anurag 2010-01-20 02:27:58
哈哈。其他人都在吃晚饭,我猜? – munch 2010-01-20 02:41:15