将div转换为li来创建jquery传送带 [英] converting div's to li to create a jquery carousel

问题描述

我试图从idxco.com的一个功能有限的提要中构建一个jquery传送带，下面是他们提供的脚本示例，它在页面中创建了一个幻灯片显示。

 < div>< script type =text / javascriptsrc =http://www.porcupinerealtor.idxco.com/idx/12231/customSlideshowJS.php?stp=basic& ;名称=曼彻斯特&安培; PT = SFR&安培;城市[] = 28117&安培; LP = 125000&安培;马力= 200000&安培; BA = 0&安培; SRT = ASC&安培;旋转= 5&安培; propCount = 999&安培;对准=中心>< /脚本> < / DIV> 
  

在浏览器中呈现此格式：

 < div id =IDX-Manchester-slideshow> 
< div id =IDX-Manchester-slideshowImage> 
< span>< a class =IDX-Manchester-ssLinkTextid =IDX-Manchester-ssImageURLhref =>< img border =0src =http：// photosx.idxco.com/096aed60bdc6bfd259bebc4b97f84e1871f4220013class =IDX-Manchester-imagealt =Slideshow imagename =Manchester-ssImageid =IDX-Manchester-ssImage>< / a>< /跨度> 
< / 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-曼彻斯特listingIdLine >< / DIV> 
< div style =display：none; ID = IDX-曼彻斯特bedLine >< / DIV> 
< div style =display：none; ID = IDX-曼彻斯特bathLine >< / DIV> 
< div style =display：none; ID = IDX-曼彻斯特remarkLine >< / DIV> 
< div style =display：none; ID = IDX-曼彻斯特listingAgent >< / DIV> 
< div style =display：none; ID = IDX-曼彻斯特listingOffice >< / DIV> 
< / div> 
  

有没有更简单的方法来做到这一点？是否可以转换来自 http://www.porcupinerealtor.idxco.com/idx/12231/customSlideshowJS.php 页面的数据，以便它可以重新格式化转换成carouself友好的格式？我不一定需要url结尾处的变量，例如：rotation = 5& propCount = 999& align = center

然而，我试图获得我可以将数据从该链接转换为水平无限（或其他）轮播。

最终，我试图达到效果类似于以下内容：

或滑块轮播在此处显示：

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

其他参考资料

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

但我不确定如何合并它。任何人都可以给我一个更好的想法，如何实现这至少得到的UL LI格式正确？

你可以尝试使用jQuery的 .replaceWith（）方法。它会用你想要的一个替换当前的HTML。所以你可以这样做：

  $（＃IDX-Manchester-slideshow> div）。 i）{
 var li = $（< li />）。html（$（this）.html（））; 
 $（this）.replaceWith（li）; $ b $（$＃$）} 
 var ul = $（< ul />，{id：'IDX-Manchester-slideshow'}）。html（$（＃IDX-Manchester-slideshow）。html （））; 
 $（＃IDX-Manchester-slideshow）。replaceWith（ul）; 
  

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?

解决方案

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

这篇关于将div转换为li来创建jquery传送带的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！