Reformatting a table based photo gallery to a UL based gallery

I have the following code:

var table = $('.photogalleryTable').before('<ul class="photogallery"></ul>')
table.find('td a').wrap('<li>').parent().appendTo('ul.photogallery');
table.remove();

This code finds a table with a list of photos and re-codes it to use a unordered list instead. The script works perfectly except for one issue. If there are 2 galleries on a page, the script will grab all of the images and reformat them into one list. Because the CMS I'm using tags each gallery table with .photogalleryTable, I'm not sure how to keep the script from touching the other galleries. What I would like to have happen is have the script re-format the first instance and then move on to the next instance, keeping the list of photos separate Is that possible?

Here is a sample of the base table code;

<table cellspacing="0" class="photogalleryTable"><tbody><tr><td class="photogalleryItem"><a title="" href="/images/varsity_basketball/alexdefending.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=80&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c67982%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5cn开发者_开发问答yrkqrsraqvat.wct&amp;USM=1"></a></td><td class="photogalleryItem"><a title="" href="/images/varsity_basketball/cheerweb.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=80&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c67982%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5cpurrejro.wct&amp;USM=1"></a></td><td class="photogalleryItem"><a title="" href="/images/varsity_basketball/hoopcheerteamcombo.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=80&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c67982%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5cubbcpurregrnzpbzob.wct&amp;USM=1"></a></td><td class="photogalleryItem"><a title="" href="/images/varsity_basketball/piercepipes.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=80&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c67982%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5ccvreprcvcrf.wct&amp;USM=1"></a></td></tr><tr><td class="photogalleryItem"><a title="" href="/images/varsity_basketball/scrappyonfloor.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=80&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c67982%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5cfpencclbasybbe.wct&amp;USM=1"></a></td><td class="photogalleryItem"><a title="" href="/images/varsity_basketball/teamabove.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=80&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c67982%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5cgrnznobir.wct&amp;USM=1"></a></td><td class="photogalleryItem"><a title="" href="/images/varsity_basketball/teamarms.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=80&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c67982%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5cgrnznezf.wct&amp;USM=1"></a></td><td class="photogalleryItem"><a title="" href="/images/varsity_basketball/yeisson.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=80&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c67982%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5clrvffba.wct&amp;USM=1"></a></td></tr><tr><td colspan="4" class="photogalleryNavigation"></td></tr></tbody></table>

---

Try this:

$('.photogalleryTable').each(function(i){
 $(this)
  .before('<ul class="photogallery"></ul>')
  .find('td a').wrap('<li>').parent().appendTo('ul.photogallery:eq('+i+')');
}).remove();

---

I think this should help: http://api.jquery.com/each/

I don't know enough to tell you exactly how to implement it, but I'm pretty sure using that function should get you the result you want.

EDIT

Maybe try

var table = $('.photogalleryTable').before('<ul class="photogallery"></ul>')
table.each(function(){find('td a').wrap('<li>').parent().appendTo('ul.photogallery')};
table.remove();

Sorry I couldn't be more helpful,

Vian