使用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>