Question

Could anybody help me with some Jquery. I have a <div> with a bunch of images inside. I need to grab all the images, empty the <div>, wrap each image in an anchor with the image’s src as the href and then wrap the link in a <li>.

This is what I have so far:

    var b = $('#thumbs .thumbs'); // Get a reference to the banner div
    var i = b.find('img'); // Pull all the images
    var s = i.attr('src');
    b.empty().append(i); // Empty the banner div, and replace the images
    b.find('img').wrap('<li><a href=" 'src' " /></li>'); // Wrap the images

Can anybody help?

Answer 1

Lets say you are having images with in a div element like this

<div id="thumbs">
    <img src="image.jpg" />
    <img src="image.jpg" />
    <img src="image.jpg" />
    <ul></ul> 
</div>

Then you can use the following jquery function to do, what u expected

$('#thumbs img').each(function(){
   $(this).parent().find('ul').append('<li><a href="'+$(this).attr('src')+'"><img src="'+$(this).attr('src')+'"/></a></li>'); 
   $(this).remove();
});

If u wanna do this for many div in that page, then use the following code

$('#thumbs .thumbs').each(function(){                
   $(this).find('img').each(function(){
       $(this).parent().parent().find('ul').append('<li><a href="'+$(this).attr('src')+'"><img src="'+$(this).attr('src')+'"/></a></li>'); 
       $(this).remove();
   });
});

Thanks Goysar,