本案例通过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的更多相关文章

  1. 合并表格行---三层for循环遍历数据

    合并表格行---三层for循环遍历数据 示例1 json <!DOCTYPE html> <html lang="zh_cn"> <head> ...

  2. for 循环遍历数据,根据不同的条件判断动态渲染页面!

    整体的逻辑为:for 循环遍历出数据,在for 循环里判断,根据不同的条件渲染 一.html页面结构 二.css就不再写了 三.JS逻辑代码 var listGroup='' ;k<data.i ...

  3. 基于JS正则实现模板数据动态渲染

    最近业务上需要动态渲染模板数据: 一.业务需求: 1.前端后端定义好模板以及变量名,根据打印机类型转换成对应sdk需要的标签模板,保存数据库 2.订单数据是前端根据支付结果获取的,最终渲染完的数据模板 ...

  4. ajax请求数据动态渲染表格

    $.ajax({ url: "/flow/userTaskFileShow.cc", data: {"processDefinitionId": pdid, & ...

  5. Vue电商后台管理系统项目第2天-首页添加表格动态渲染数据&分页

    0x01.使用Github学习的姿势 基于昨天的内容,今天的内容需要添加几个单文件组件,路由文件也需要做相应的增加,今天重点记录使用Element-UI中的表格组件实现数据动态渲染的实现流程和分页功能 ...

  6. JS轮播图动态渲染四种方法

    一. 获取轮播图数据  ajax 二.根据数据动态渲染 (根据当前设备 屏幕宽度判断) 1. 准备数据 2. 把数据转换成html格式的字符串 动态创建元素 字符串拼接 模板引擎 框架方法 2.把字符 ...

  7. 高效遍历匹配Json数据与双层for循环遍历Json数据

    工作中往往遇到这种情况,保留用户操作痕迹,比如用户选择过得东西,用户进入其它页面再返回来用户选择的的数据还在. 比如:1.购物车列表中勾选某些,点击任意一项,前往详情页,再返回购物车依旧需要呈现勾选状 ...

  8. vue 动态渲染数据很慢或不渲染

    vue 动态渲染数据很慢或不渲染 原因是因为vue检测速度很慢,因为多层循环了,在VUE 2.x的时候还能渲染出来,1.x的时候压根渲染不出来.解决方式:在动态改变数据的方法,第一行加上 this.$ ...

  9. Layui之动态循环遍历出的富文本编辑器显示

    这篇记得是工作中的例子 描述: 平常的富文本显示都是根据静态的html获取id来显示,比如: <textarea class="layui-textarea" id=&quo ...

随机推荐

  1. 「JSOI2013」哈利波特和死亡圣器

    「JSOI2013」哈利波特和死亡圣器 传送门 首先二分,这没什么好说的. 然后就成了一个恒成立问题,就是说我们需要满足最坏情况下的需求. 那么显然在最坏情况下伏地魔是不会走回头路的 因为这显然是白给 ...

  2. 3_5 生成元(UVa1583)

    如果x加上x的各个数字之和得到y,就说x是y的生成元.给出n(1<=n<=100000),求最小生成元.无解输出0.例如,n=216,121,2005时的解分别为198,0,1979. 样 ...

  3. 吴裕雄 PYTHON 神经网络——TENSORFLOW MNIST读取数据

    from tensorflow.examples.tutorials.mnist import input_data mnist = input_data.read_data_sets("E ...

  4. element table批量删除

    很小的一个问题,但是有细节需要注意 (1)问题:在起初我写的时候是根据元素的name是否相同判断是否是同一个节点,出现的问题就是,如果说两个元素的name相同,就会判断出错 (2)代码: <te ...

  5. 【原】python3.6安装python-dev

    [root@ci /usr/lib64/python3.6]# yum -y install python36-devel

  6. leetcode 0205

    目录 700 二叉搜索树中的搜索 175 组合两个表 仍旧不理解 left join 590. N叉树的后序遍历 递归: 迭代: 589 N叉树的前序遍历 递归, 注意 递归 过程中附带的 actio ...

  7. Android的TextView在显示文字的时候,如果有段中文有英文,有中文,有中文标点符号,你会发现,当要换行的时候遇到中文标点, 这一行就会空出很多空格出来

    一.问题描述: Android的TextView在显示文字的时候,如果有段中文有英文,有中文,有中文标点符号,你会发现,当要换行的时候遇到中文标点, 这一行就会空出很多空格出来.原因是: 1) Tex ...

  8. request库解析中文

    官网地址: http://cn.python-requests.org/zh_CN/latest/ 高级用法 本篇文档涵盖了 Requests 的一些高级特性. 会话对象 会话对象让你能够跨请求保持某 ...

  9. python 的参数总结

    一.形参和实参 函数参数的作用是传递数据给函数使用 在使用的过程中,参数有两种形式:形式参数和实际参数 形参: 定义函数的参数 实参: 调用函数时的参数 根据实际参数类型不同,将实际参数传递给形参的方 ...

  10. Scrapy 爬取动态页面

    目前绝大多数的网站的页面都是冬天页面,动态页面中的部分内容是浏览器运行页面中的JavaScript 脚本动态生成的,爬取相对比较困难 先来看一个很简单的动态页面的例子,在浏览器中打开 http://q ...