Mapping one block of HTML to another with jQuery -

Mapping one block of HTML to another with jQuery -

i have div multiple images needs replaced <ul> block contains <li> each image. block 1, below, needs replaced block 2.

block1 <div id="box"> <img src="images/pic1.jpg"> <img src="images/pic2.jpg"> <img src="images/pic3.jpg"> etc. </div> block2 <ul> <li> <img src="images/pic1.jpg"> </li> <li> <img src="images/pic2.jpg"> </li> <li> <img src="images/pic3.jpg"> </li> etc. </ul>

i've started with:

$('<ul id='wrapper'>); $('#box').find('img').each(function() { src = $(this).find('img')[0]; $('<li><img src=src></li>).appendto('ul#wrapper') ; });

but seems clumsy , unlikely work, , i'm thinking there must more elegant way pull off.

does have suggestions?

thanks

an easy way to:

$('#box').find('img').each(function() { $(this).wrap( "<li></li>" ); }); $('#box').wrapinner( "<ul id='wrapper'></ul>");

fiddle

if wanted to, can add together classes , such wrap. more details here.

jquery