使用jQuery處理和轉換表格項目

Question

好的，我碰到了一堵磚牆。我有一個項目，我需要將表中列出的項目（照片）轉換爲UL進一步的jQuery操作（理想情況下使用jQuery Cycle - http://www.malsup.com/jquery/cycle/）。我找到了這個堆棧溢出帖子（How to transform HTML table to list with JQuery?），但是這個代碼似乎有點用處和特定於OP的使用。我也很好奇這是否需要在頁面加載的某個點執行（DOM準備就緒，Post DOM準備就緒等）。

不幸的是，我沒有太多格式化輸出的選項，因爲它是由第三方模塊生成的。目前，輸出格式，像這樣（簡體空間和清晰度編號和網址）：

<!-- First Item, I can set this to format however I like --> 


<a href="16.jpg" rel="lightbox2" title=""><img src="16.jpg" class="FirstPhoto" alt="" width="320" height="240" /></a> 

<!-- Subsequent Items are put into a table, as the developer has explained - rendered as a Datalist --> 
<table id="CMS-ASSIGNED-UNIQUEID" cellspacing="0" cellpadding="0" border="0" style="width:100%;border-collapse:collapse;"> 
     <tr> 
      <td align="center"> 
      <a href="17.jpg" rel="lightbox2" title=""><img src="17.jpg" class="ItemPhoto" width="125" height="94" alt=""></a> 
      </td> 
      <td align="center"> 
      <a href="18.jpg" rel="lightbox2" title=""><img src="18.jpg" class="ItemPhoto" width="125" height="94" alt=""></a> 
      </td> 
     </tr> 
     <!-- Continue for n Rows --> 
     </tr> 
    </table> 

理想情況下，我想獲得它這樣的出口（注意，第一個項目也是在那裏，我可以解決此，如果它超出了什麼是可能的）範圍：

<div class="slideshow"> 
    <img src="16.jpg" width="125" height="94" /> 
    <img src="17.jpg" width="125" height="94" /> 
    <img src="18.jpg" width="125" height="94" /> 
</div> 

Answer 1

這個jQuery的點點會抓住所有的img元素，並將它們添加到幻燈片元素容器

$(function() { 
    $('<div class="slideshow"></div>') 
     .appendTo('body') 
     .append(
      $('a[rel=lightbox2] > img').clone() 
      .removeClass() 
      .attr({ height: 94, width: 125 }) 
     ); 
}); 

此時，你應該能夠運行您的幻燈片。

Answer 2

如果我沒有記錯，這似乎是的簡單情況：

$(document).ready(function() 
{ 
    var container = $(document.createElement('div')) 
     .addClass('slideshow'); 
    $('#CMS-ASSIGNED-UNIQUEID img.ItemPhoto') 
     .removeClass('ItemPhoto') 
     .appendTo(container); 
}); 

調用container.html()會給你想要的輸出，或者你可以直接將元素包含在文檔的DOM中。方法ready也將確保該表是可用的（除非它稍後動態加載）。

Answer 3

這裏有一些東西讓你去。它可能需要修改您的特定需求，因爲您的HTML環境缺失。

var images = $('img.FirstPhoto, img.ItemPhoto'); 
var newImages = []; 
newImages[newImages.length] = '<div class="slideshow">'; 
images.each(function() { 
    var img = $(this); 
    newImages[newImages.length] = '<img src="'; 
    newImages[newImages.length] = img.attr('src'); 
    newImages[newImages.length] = '" width="'; 
    newImages[newImages.length] = img.attr('width'); 
    newImages[newImages.length] = '" height="'; 
    newImages[newImages.length] = img.attr('height'); 
    newImages[newImages.length] = '" />'; 
}); 
newImages[newImages.lenght] = '</div>'; 

var newHtml = newImages.join(''); 
var newElement = $(newHtml); 

var table = $('table#CMS-ASSIGNED-UNIQUEID'); 
table.after(newElement); 
table.remove(); 

$('img.FirstPhoto').closest('a').remove();