Find img src and append to href

I am using the jQuery Plugin Galleriffic with a content management system. I need to generate the thumbnails with jQuery.

I basically need to use jQuery to look inside a div, find all the images开发者_C百科, wrap each image in an <a> and a <li> around that. Find the img src and input it into the href of the <a>.

So each image in the end will look like this:

<li><a href="link to img src"><img src="image src" /></a></li>

Perhaps something like this :

$('img').each(function(){
    $(this).wrap('<li><a href="' + $(this).attr('src') + '"></a></li>');
});

See a working demo http://jsfiddle.net/usmanhalalit/UYQqw/1/

$(function(){
    $('#imgs img').each(function(){
       $(this).wrap('<li><a href="'+$(this).attr('src')+'">','</a><li>')
    });
});

Here is the demo markup I used

<img src="image src" />
<div id='imgs'>
    <img src="image src1" />
    <img src="image src2" />
    <img src="image src3" />
</div>

As you said you need to look inside a div, so it will do it only for img inside #imgs div above.

$('img').each(function(){
    var parent = $(this).parent();
    var a = $('<a>', {
         href: this.src
    });
    $(this).appendTo(a);
    var li = $('<li>');
    a.appendTo(li);

    li.appendTo(parent);
});

Fiddle: http://jsfiddle.net/maniator/bAuwT/1/