码迷,mamicode.com
首页 > Web开发 > 详细

for 循环遍历数据动态渲染html

时间:2018-07-31 19:10:53      阅读:751      评论:0      收藏:0      [点我收藏+]

标签:数据请求   获取   image   ajax   news   class   alt   children   技术   

    本案例通过ajax动态获取数据,然后遍历出数据渲染html
小心踩坑:因为有时候不注意,渲染页面的时候只能输出最后一个数据
所以正确写法为下:
如果AJAX数据请求成功的情况下:

html   
         <div class="recommend-list"> <ul> <li> <div> <p class="recommend-h"></p> <p class="getTime"></p> </div> <div><img class="recommend-img"></div> </li> </ul> </div>

ajax请求数据:
技术分享图片

 



js
                   for(var i = 0;i<$(‘.recommend-list>ul‘).children().length;i++){
                     $(‘.recommend-h‘)[i].innerHTML=date.info.hotNews[i].title
                     $(‘.getTime‘)[i].innerHTML=date.info.hotNews[i].source
                     $(‘.recommend-img‘)[i].src = date.info.hotNews[i].imgsrc0 
                      }

 

for 循环遍历数据动态渲染html

标签:数据请求   获取   image   ajax   news   class   alt   children   技术   

原文地址:https://www.cnblogs.com/xxflz/p/9397013.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!