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，而不是单独的。我需要使用$（）。每个函数我想但不知道如何将它与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>

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

1 个答案: