Question

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

我无法提交jsfiddle网址，所以我也在这里包含了代码。这是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>");
    }); 
});

Answer 1

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

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

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

Answer 2

您需要选择正确的图像。使用.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/

Answer 3

 $(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

Answer 4

    $(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()希望这会有所帮助。

动态更改一组li标签中的html

4 个答案: