Facebook上的图像在网站上，编辑jquery

Question

这是“我的代码”从Facebook拉取图像并显示它们。

但我想包装图像周围< A HREF = “image.source” 级= “highslide” 的onclick =“返回hs.expand（本）>

请帮我输出：

<a href="image.source" class="highslide" onclick="return hs.expand(this)> 
<img src"image.source" width="167" height="167"> 
</a> 

原始代码：

<script type="text/javascript" src="underscore-min.js"></script> 
<script type="text/javascript"> 
$.getJSON('http://graph.facebook.com/261512740659107/photos').then(function (response) { 

    // 0-8, 0 returns the largest available images, 8 the smallest 
    var imageIndex = 4; 

    var images = _(response.data) 
     .chain() 
     .pluck('images') 
     .pluck(imageIndex) 
     .value(); 

    console.log(images); 

    _(images).each(function (image) { 
     $('#image-container').append(
     $('<img>').attr('src', image.source).attr('height', 167).attr('width', 167)); 
    }); 
}); 
</script> 

Answer 1

您可以使用jQuery的包裹（）函数把周围的<img>标签<a>标签。只需使用appendTo（）来获取新元素的实例，以便您可以包装（）它。

$.getJSON('http://graph.facebook.com/261512740659107/photos').then(function (response) { 

    // 0-8, 0 returns the largest available images, 8 the smallest 
    var imageIndex = 4; 

    var images = _(response.data) 
     .chain() 
     .pluck('images') 
     .pluck(imageIndex) 
     .value(); 

    _(images).each(function (image) { 
     $($('<img>').attr({'src': image.source, 'height': 167, 'width': 167})).appendTo('#image-container').wrap('<a href="' + image.source + '" class="highslide" onclick="return hs.expand(this);" />'); 
    }); 
});