jQuery将html动态添加到div

我在使用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标签之间添加图像动态：在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>'); 
        } 
       } 
      });

然后append这些元素的div标记为滑块：

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

编辑1：这是一个基于它应该如何工作的jSfiddle，将html中的li标记替换为wp_pres_slug类，以查看它不应该做什么。 JSfiddle

在此先感谢...我会继续研究，看看我能不能弄明白。

PS *阿贾克斯是有点粗糙，我通常会清理一次我得到的一切工作吧:)

来源

2015-11-24 andre3wap

调用$（）滑块（）函数附加李 – Confused

后。不要使用div，把wp_pres_sl ug class in ul并附上lis there – jcesarmobile

@Confused - 我昨天试过了，但没有奏效。 – andre3wap

更新了小提琴。

请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>'); 
}

小提琴：http://jsfiddle.net/mad3z8hs/7

来源

2015-11-24 14:40:20

这没有奏效。 – andre3wap

@ andre3wap更新了小提琴[http://jsfiddle.net/mad3z8hs/7/ –

我宁愿不在里面有'li'标签，但现在可以工作。我在'li'中添加了一个'style = display：none'，它仍然可以工作99％。感谢您的意见。 – andre3wap

jQuery将html动态添加到div

回答

相关问题