Manipulation et conversion d'éléments de table à l'aide de jQuery

Question

Ok, j'ai touché un mur de briques. J'ai un projet où j'ai besoin de convertir des éléments (Photos) listés dans un tableau en UL pour une autre manipulation jQuery (idéalement en utilisant jQuery Cycle - http://www.malsup.com/jquery/cycle/). J'avais repéré cet article Stack Overflow (How to transform HTML table to list with JQuery?), mais le code semble un peu à usage unique et spécifique à l'utilisation de l'OP. Je suis également curieux de savoir si cela devrait être exécuté à un certain point sur le chargement de la page (pré-DOM prêt, Post DOM-prêt, etc).

Malheureusement, je n'ai pas beaucoup d'options pour formater la sortie telle qu'elle est produite par un module tiers. À l'heure actuelle, la sortie est formaté comme ceci (ID et les URL simplifiées pour l'espace et de clarté):

<!-- 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> 

Idéalement, je voudrais obtenir à l'exportation comme ceci (notez que le premier élément est là-dedans, je peut contourner ce si elle est au-delà de la portée de ce qui est possible):

<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

Ce petit peu de jQuery va récupérer tous les éléments img et les ajouter à l'élément diaporama contenant

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

À ce stade, vous devriez être en mesure d'exécuter votre diaporama.

Answer 2

Si je ne me trompe pas, cela semble être le cas simple:

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

appel container.html() donnerait vous la sortie que vous vouliez, ou vous pourriez inclure l'élément dans le DOM du document directement. La méthode ready s'assurera également que la table est disponible (sauf si elle est chargée dynamiquement à un point ultérieur).

Answer 3

Voici quelques trucs pour vous aider à démarrer. Il peut avoir besoin de modifications à vos besoins spécifiques, car le contexte autour de votre HTML est manquant.

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