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准备等）。

不幸的是，我没有太多选项来格式化输出，因为它是由第三方模块生成的。目前，输出的格式如下（为空间和清晰度而简化的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 })
        );
});

此时您应该可以运行幻灯片了。

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();

使用jQuery操作和转换表项

3 个答案: