2

我正在尝试<li>在每个循环中更改 html，但所有 LI 元素都显示相同的图像源。如果你看看这个 Fiddle，你就会明白我的意思。

( http://jsfiddle.net/dxhqL/2/ )

我不能只提交 jsfiddle url，所以我也在这里包含了代码。这是html：

<ul class="gallery-thumbnail">
<li><img width="68" height="68" src="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg"></li>
<li><img width="68" height="68" src="http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg"></li>
<li><img width="68" height="68" src="http://leandrovieira.com/projects/jquery/lightbox/photos/image3.jpg"></li>
<li><img width="68" height="68" src="http://leandrovieira.com/projects/jquery/lightbox/photos/image4.jpg"></li>
</ul>

这是JS

$(document).ready(function() {
    $("ul.gallery-thumbnail li img").each(function() {
        $("ul.gallery-thumbnail li").html("<a href='" + $(this).attr("src") + "'><img width='68' height='68' src='" + $(this).attr("src") + "'></a>");
    }); 
});
4

4 回答 4

2

你可以在这里使用.wrap()

$("ul.gallery-thumbnail li img").each(function () {
    $(this).wrap("<a href=\"" + this.src + "\" />");
});

http://jsfiddle.net/dxhqL/4/

于 2013-01-31T20:53:17.350 回答
1

您需要选择正确的图像。与传递给回调.eq的非常方便的索引一起使用：.each

$("ul.gallery-thumbnail li img").each(function(idx) {
    $("ul.gallery-thumbnail li").eq(idx).html("<a href='" + $(this).attr("src") + "'><img width='68' height='68' src='" + $(this).attr("src") + "'></a>");
});

http://jsfiddle.net/ExplosionPIlls/dxhqL/3/

于 2013-01-31T20:51:15.063 回答
0 
 $(this).closest('li').html("<a href='" + $(this).attr("src") + "'><img width='68' height='68' src='" + $(this).attr("src") + "'></a>");

get the closest <li>  and it will work
于 2013-01-31T21:08:11.703 回答
-2 
    $(document).ready(function() {

    $("ul.gallery-thumbnail li img") {
        $("ul.gallery-thumbnail li").html("<a href='" + $(this).attr("src") + "'><img width='68' height='68' src='" + $(this).attr("src") + "'></a>");

    }); 
});

您可能想删除.each(function()希望这有帮助。

于 2013-01-31T20:53:23.723 回答