使用 Jquery ajax 将图像加载到隐藏的 div 中

Question

我正在尝试使用 Jquery 遍历画廊中的一组大图像，然后使用 ajax 将它们加载到隐藏的 div 中，以制作这些相同图像的弹出索引。基本上它是一本需要页面索引的翻书，我想要一种更简单的方法来写出索引，而不是为每张图像编码。

$.ajax({
  url: "index.html",
  dataType: 'html'
}).done(function( html ) {

var div = $('a.book img', $(html));

$("#test").append($('<ul>')
.append($('<li class="toc">')
.append($('<a>').attr('href','#')
.append($(div).addClass('border'))
)
)
);
});

我仍然是一名新手编码员，我需要一些指导才能让它发挥作用。此代码将输出：

<div id="test">
<ul>
<li class="toc">
<a href="#">
 <img class="border" src="test.jpg" alt="Test">
 <img class="border" src="test2.jpg" alt="Test2">
 <img class="border" src="test3.jpg" alt="Test3">

</a>
</li>
</ul>

基本上，我在“ a href 下获取所有图像，而不是单独获取。我需要使用 $().each 函数，但我不知道如何将它与 ajax 一起使用。 如果问题令人困惑，我深表歉意。

Answer 1

$.ajax({
    url: "index.html",
    dataType: 'html'
}).done(function( html ) {
    var ul = $('<ul />');

    $(html).find('a.book img').each(function(i, img) {
        var anchor = $('<a />',  {href : '#'}),
            li     = $('<li />', {'class' : 'toc'});
        li.append( anchor.append( $(img).addClass('border') ) ).appendTo(ul);
    });

    $('#test').append(ul);
});

输出：

<div id="test">
    <ul>
        <li class="toc">
            <a href="#">
                <img class="border" src="test1.jpg">
            </a>
        </li>
        <li class="toc">
            <a href="#">
                <img class="border" src="test2.jpg">
            </a>
        </li>
        <li class="toc">
            <a href="#">
                <img class="border" src="test3.jpg">
            </a>
        </li>

    </ul>
</div>