Использование Jquery ajax для загрузки изображений в скрытый div

Question

Я пытаюсь использовать JQuery для перебора группы больших изображений в галерее, а затем загружать их в скрытый div с помощью ajax, чтобы создать всплывающий индекс этих же изображений. В основном это флип-книга, которая нуждается в индексе страницы, и мне нужен более простой способ записать индекс, а не кодировать его для каждого изображения.

$.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>