JCarousel使用JQuery加载<li>

Question

我有一个JCarousel，它可以在商店里买到各种品牌。品牌链接，名称和图片，我从另一个页面在商店( CMS限制我访问这些数据不同)。

我正在提取品牌数据并格式化一个<li>条目并将其附加到JCarousel中。最后发生的事情是，旋转木马包含“占位符<li>”和我附加的列表中的占位符，但总是在视图下面。<li>条目的语法看起来是正确的，但我似乎不能用它们来代替JCarousel创建的占位符。

经过一些研究，尝试和错误，我被困住了，所以任何帮助都是感激的。

我的HTML / JS如下所示：

<div class="Block Moveable Panel" id="BrandsJCarousel">

    <link rel="stylesheet" type="text/css" href="/content/jcarousel.css">
    <script type="text/javascript" src="/content/jquery.jcarousel.min.js"></script>

    <div class=" jcarousel-skin-tango">
        <div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;">
            <div class="jcarousel-clip jcarousel-clip-horizontal" style="position: relative;">
                <ul id="brands" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: -850px; width: 1205px;">
                      **// LIST NEEDS TO APPEAR IN HERE**
                </ul>
            </div>
            <div class="jcarousel-prev jcarousel-prev-horizontal" style="display: block;"></div>
            <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div>
        </div>
        <script type="text/javascript">    
            $(document).ready(function() {
                $.ajax({url: "/brands"}).done(function ( data ) {
                    var html = $(data);
                    var items = $('.SubBrandListGrid li', html);
                    items.each(function() {
                        var link = $('a', this);
                        if(link){
                            var librand = "<li><a href=" + $(link).attr('href') + "><img src=" + $('img', this).attr('src') + " width='60' height='60' alt='" + $(link).text() + "'/></a></li>";
                            $("#brands").append(librand);
                        }                                
                    });                             
                });
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                jQuery('#brands').jcarousel({
                    auto: 10,
                    scroll: 8,
                    wrap: 'circular'
                });
            });
        </script>    

    </div>  
</div>

实际加载到列表中的内容(来自Chrome检查)是这样的：

<ul id="brands" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: -644.80575px; width: 2565px;">
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="1" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="2" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="3" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="4" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-5 jcarousel-item-5-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="5" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="6" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-7 jcarousel-item-7-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="7" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-8 jcarousel-item-8-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="8" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-9 jcarousel-item-9-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="9" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-10 jcarousel-item-10-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="10" style="float: left; list-style: none;"></li>
<li><a href="/brands/ACBEL.html"><img src="/product_images/z/acbel__02930.jpg" width="60" height="60" alt="ACBEL"></a></li>
<li><a href="/brands/ACCESS.html"><img src="/product_images/c/access__56651.jpg" width="60" height="60" alt="ACCESS"></a></li>
<li><a href="/brands/ACER.html"><img src="/product_images/l/acer__42827.jpg" width="60" height="60" alt="ACER"></a></li>
<li><a href="/brands/ACTIVISION.html"><img src="/product_images/p/activision__33939.png" width="60" height="60" alt="ACTIVISION"></a></li>
</ul>

Answer 1

通常我会这样做：

你的旋转木马：

<ul id="brands"></ul>

你的剧本：

  <script type="text/javascript">    
          $(document).ready(function() {
            $.ajax({
             url: "/brands",
             async:false,
             success : function(data){

             var html = $(data);
             var items = $('.SubBrandListGrid li', html);
             items.each(function() {
               var link = $('a', this);

                 if(link){
                   var librand = "<li><a href=" + $(link).attr('href') + "><img src=" + $('img', this).attr('src') + " width='60' height='60' alt='" + $(link).text() + "'/></a></li>";
                            $("#brands").append(librand);
                 }

             }

            $('#brands').jcarousel({
                auto: 10,
                scroll: 8,
                wrap: 'circular'
            });

         }

        });
     });
    </script>