使用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下，而不是单独我需要使用$（）的每一个我的看法，但不知道如何用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>