converting div's to li to create a jquery caro

Question

I am trying to build a jquery carousel from a feature-limited feed from idxco.com below is example script that they provide which creates a slideshow in a page.

<div><script type="text/javascript" src="http://www.porcupinerealtor.idxco.com/idx/12231/customSlideshowJS.php?stp=basic&name=Manchester&pt=sfr&city[]=28117&lp=125000&hp=200000&ba=0&srt=ASC&rotation=5&propCount=999&alignment=center"></script></div>

Which renders this format in the browser:

<div id="IDX-Manchester-slideshow">
    <div id="IDX-Manchester-slideshowImage">
        <span><a class="IDX-Manchester-ssLinkText" id="IDX-Manchester-ssImageURL" href=""><img border="0" src="http://photos-5.idxco.com/096aed60bdc6bfd259bebc4b97f84e1871f4220013" class="IDX-Manchester-image" alt="Slideshow image" name="Manchester-ssImage" id="IDX-Manchester-ssImage"></a></span>
    </div>
    <div id="IDX-Manchester-priceLine"></div>
    <div id="IDX-Manchester-addressLine"></div>
    <div id="IDX-Manchester-cszLine"></div>
    <div style="display:none;" id="IDX-Manchester-listingIdLine"></div>
    <div style="display:none;" id="IDX-Manchester-bedLine"></div>
    <div style="display:none;" id="IDX-Manchester-bathLine"></div>
    <div style="display:none;" id="IDX-Manchester-remarkLine"></div>
    <div style="display:none;" id="IDX-Manchester-listingAgent"></div>
    <div style="display:none;" id="IDX-Manchester-listingOffice"></div>
</div>

Is there an easier way to do this? Is it possible to convert the data from the http://www.porcupinerealtor.idxco.com/idx/12231/customSlideshowJS.php page, so that it can then be reformatted into a carouself-friendly format? I don't necessarily need the variables on end of the url such as: rotation=5&propCount=999&alignment=center

I am however, trying to get the proof of concept to work where I can convert the data from that link into a horizontal "infinite" (or other) carousel.

Ultimately, I am trying to achieve the effect of something similar to :

or the slider carousel show here :

http://gorillathemes.com/demo/smoothpro/

additional references on stackoverflow:

/questions/9476621/parse-divs-to-create-ul-li-list-removing-duplicates

But I am unsure how to incorporate it. Can anyone give me a better idea of how to implement this to at least get the ul li formatting correct?

Answer 1

You could try using jQuery's .replaceWith() method. It will replace a current HTML with one you desire. So you could do something like:

$("#IDX-Manchester-slideshow > div").each(function(i) {
    var li = $("<li />").html($(this).html());
    $(this).replaceWith(li);
})
var ul = $("<ul />", { id: 'IDX-Manchester-slideshow' }).html($("#IDX-Manchester-slideshow").html());
$("#IDX-Manchester-slideshow").replaceWith(ul);