使用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一起使用。 如果问题有点混乱，请见谅。

- Macsupport

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>

- adeneo

---

在您编辑之前，我曾考虑过使用 $('#test').append(ul);。 - Macsupport

当然，或者 $('#test').append( ul.append(li) ); 也可以。 - adeneo

这个代码可以工作，但我需要一个li对应一个a href，而不是所有的都在一个里面。我正在尝试使用你的代码来解决这个问题，但还没有成功。 - Macsupport

@Mike - 不确定你是如何尝试构建它的，但我编辑了答案以这种方式完成。 - adeneo

谢谢帮助！有没有一种简单的方法来索引以这种方式加载的图像？我想使用该图像的索引为每个图像加载页面编号。 - Macsupport