Question

我正在使用jQuery Plugin Galleriffic和内容管理系统。我需要使用jQuery生成缩略图。

我基本上需要使用jQuery来查看div，找到所有图像，将每个图像包裹在<a>和<li>周围。找到img src并将其输入到<a>的href中。

所以最后每张图片都是这样的：

<li><a href="link to img src"><img src="image src" /></a></li>

Answer 1

也许是这样的：

$('img').each(function(){
    $(this).wrap('<li><a href="' + $(this).attr('src') + '"></a></li>');
});

Answer 2

查看工作演示 http://jsfiddle.net/usmanhalalit/UYQqw/1/

$(function(){
    $('#imgs img').each(function(){
       $(this).wrap('<li><a href="'+$(this).attr('src')+'">','</a><li>')
    });
});

这是我使用的演示标记

<img src="image src" />
<div id='imgs'>
    <img src="image src1" />
    <img src="image src2" />
    <img src="image src3" />
</div>

正如您所说，您需要查看div内部内容，因此仅针对上方img div内的#imgs进行此操作。

Answer 3

$('img').each(function(){
    var parent = $(this).parent();
    var a = $('<a>', {
         href: this.src
    });
    $(this).appendTo(a);
    var li = $('<li>');
    a.appendTo(li);

    li.appendTo(parent);
});

小提琴：http://jsfiddle.net/maniator/bAuwT/1/

找到img src并附加到href

3 个答案: