Управление и преобразование элементов таблицы с использованием jQuery

Question

Хорошо, я врезался в кирпичную стену. У меня есть проект, в котором мне нужно преобразовать элементы (фотографии), перечисленные в таблице, в UL для дальнейшей манипуляции с jQuery (в идеале, используя jQuery Cycle - http://www.malsup.com/jquery/cycle/). Я нашел этот пост переполнения стека ( Как преобразовать таблицу HTML в список с помощью JQuery? ), однако код кажется немного одноразовым и специфичным для использования ОП. Мне также любопытно, нужно ли это выполнять в определенный момент загрузки страницы (pre-DOM ready, Post DOM-ready и т. Д.).

К сожалению, у меня мало возможностей для форматирования вывода, так как он создается сторонним модулем. В настоящее время выходные данные отформатированы следующим образом (идентификаторы и 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

Вот кое-что, что поможет вам. Это может потребовать изменений в соответствии с вашими конкретными потребностями, поскольку контекст вокруг вашего 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();

Answer 3

Если я не ошибаюсь, это выглядит как простой случай:

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

Вызов container.html() даст вам желаемый результат, или вы можете включить элемент в DOM документа напрямую. Метод ready также обеспечит доступность таблицы (если только она не будет загружена динамически на более позднем этапе).