2

各ループ内で htmlを変更しようとして<li>いますが、すべての 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 に答える