jquery - 使用 jQuery 操作和转换表项

Question

好吧，我碰壁了。我有一个元素，我需要将表中列出的元素(照片)转换为 UL 以进行进一步的 jQuery 操作(最好使用 jQuery Cycle - http://www.malsup.com/jquery/cycle/)。我找到了这个 Stack Overflow 帖子 ( How to transform HTML table to list with JQuery? )，但是代码似乎有点一次性使用并且特定于 OP 的使用。我也很好奇这是否需要在页面加载的某个时间点执行(预 DOM 就绪、后 DOM 就绪等)。

不幸的是，我没有太多用于格式化输出的选项，因为它是由第 3 方模块生成的。目前，输出格式如下(为空间和清晰起见简化了 ID 和 URL):

<!-- 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 })
        );
});

此时您应该可以放映幻灯片了。