Using jquery ajax to load images into a hidden div

Question

I am trying to use jquery to iterate over a group of large images in a gallery, and then load them into a hidden div using ajax to create a popup index of the same images. This is basically a flip book that needs a page index, and I need an easier way to write the index, rather than encode it for each image.

$.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')) ) ) ); }); 

I'm still a beginner coder, and I need some direction to get it working. This code will output:

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

Basically I get all the images under "a href, not individually. I need to use $ (). Each function I think, but not sure how to use it with ajax. I apologize if the question is confused.

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); }); 

outputs:

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