jQuery动态地将html追加到div中

Question

祝大家感恩节前快乐。

我在使用jQuery+html和Ajax调用构建动态滑动库时遇到了一个问题。

问题：当jQUery将生成的li标记附加到页面时，它会同时添加并显示所有图像。如果我自己将li标记添加到页面，一切都很好。我的问题是：如何将li标记动态地附加到页面上，就像我静态地附加一样（一次只显示一个图像，直到滑块滑到下一个为止）。

情况如下：

我有一个jQuery滑块库，它可以将slider类之间的任何<li>标记转换为幻灯片，例如：

<div class="slider">
  <ul>
    <li>Slide one</li>
    <li>Slide two</li>
  </ul>
</div>

我没有将<li>标记设为静态，而是用PHP构建了一个API，从DB中提取图像并以Json格式输出图像链接。以下示例：

[{"pres_photo_link":"http://domain.com/myimage.jpg"},
{"pres_photo_link":"http://domain.com/myimage2.jpg"},
{"pres_photo_link":"http://domain.com/myimage3.jpg"}]

我使用jQuery+Ajax创建<li>标签，并在slider > ul标签之间动态添加图像：

           $.ajax
            ({
                url: "My API URL", 
                type: "POST",
                dataType: "json",
                data: "param=no",
                success: function(data) 
                {
                    for(var i =0;i < data.length;i++)
                    {       
                      var item = data[i];
                        var link =  "'"+item.photo_link+"'";
                      $('.wp_pres_slug').append('<li><a href="#" onClick="openInAppBrowserBlank('+link+');"><img src='+link+' alt="*"/></a></li>');
                  }
                }
            });

AND然后append那些元素到div标签之间的ul用于滑块：

    <div class="slider">
      <ul>
         <div class="wp_pres_slug"></div>
      </ul>
    </div>

EDIT1:这是一个基于jSfiddle应该如何工作的例子，用wp_pres_slug类替换html中的li标记，看看它不应该做什么。JSfiddle

提前感谢。。。我会继续研究，看看能不能弄清楚。

PS*Ajax有点粗糙，我通常会在一切正常后进行清理：）

Answer 1

更新了fiddle。

请试用var link = item.photo_link instead of var link = "'"+item.photo_link+"'";HTML:

<div id="slider">
<a href="#" class="control_next">>></a>
<a href="#" class="control_prev"><</a>
<ul class="wp_pres_slug">
  <!--To pull dynamic, Replace the LI's with <div class="wp_pres_slug"></div>-->
    <li>Slide 1</li>
    <li>Slide 2</li>
</ul>  
</div>

JQuery:

var data =[{"photo_link":"http://img1.jurko.net/avatar_16844.gif"},
{"photo_link":"http://img1.jurko.net/avatar_16844.gif"},
{"photo_link":"http://img1.jurko.net/avatar_16844.gif"}];
for(var i =0;i < data.length;i++)
 {       
     var item = data[i];
     var link =  item.photo_link;
     console.log(link);
     $('.wp_pres_slug').append('<li><a href="#" onClick="openInAppBrowserBlank('+link+');"><img src='+link+' alt="*"/></a></li>');
 }

Fiddle：http://jsfiddle.net/mad3z8hs/7