重新格式化基於表格照相館到基於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();