重新格式化基于表格照相馆到基于UL画廊

Question

我有以下代码：

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

这个代码是找到与照片和重新编码它使用无序列表，而不是一个列表的表。除了一个问题，脚本完美无缺。如果页面上有2个画廊，该脚本将抓取所有图像并将其重新格式化为一个列表。由于CMS使用的是为每个图库表格标记.photogalleryTable，我不知道如何让脚本不会触及其他图库。我想要发生的事情是脚本重新格式化第一个实例，然后继续下一个实例，保持照片列表单独可能吗？

以下是基表代码示例;

<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%5cnyrkqrsraqvat.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> 

Answer 1

我认为这应该帮助：http://api.jquery.com/each/

我不知道足够准确地告诉你如何实现它，但是我敢肯定，使用该功能应该得到你想要的结果。

编辑

也许尝试

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

抱歉，我不能提供更多的帮助，

维安

Answer 2

试试这个：

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