本案例通过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. UE4高级运动系统(Advanced Locomotion System V3)插件分析

    Advanced Locomotion System V3是虚幻商城的一款第三方插件.它相比UE4的基础走跑跳表现,实现了更多动作游戏里常用的运动特性,虽然价格定价不菲,依然备受关注.笔者试用了这款插 ...

  2. JDK8源码解析 -- HashMap(二)

    在上一篇JDK8源码解析 -- HashMap(一)的博客中关于HashMap的重要知识点已经讲了差不多了,还有一些内容我会在今天这篇博客中说说,同时我也会把一些我不懂的问题抛出来,希望看到我这篇博客 ...

  3. [LeetCode] 735. Asteroid Collision

    行星碰撞. 题意是给一个数组 asteroids,表示在同一行的行星.对于数组中的每一个元素,其绝对值表示行星的大小,正负表示行星的移动方向(正表示向右移动,负表示向左移动).每一颗行星以相同的速度移 ...

  4. Unity中调用Windows窗口选择文件

    1.OpenFileName数据接收类,如下: using UnityEngine; using System.Collections; using System; using System.Runt ...

  5. 电源适配器DC插头规格

    电源适配器 DC 插头的内径外径规格有 (单位为 MM) :2.0*0.72.35*0.72.35*1.12.5*0.73.5*1.13.5*1.354.0*1.75.5*2.15.5*2.54.75 ...

  6. vue中加载three.js的gltf模型

    vue中加载three.js的gltf模型 一.开始引入three.js相关插件.首先利用淘宝镜像,操作命令为: cnpm install three //npm install three也行 二. ...

  7. springboot默认创建的bean是单实例

    默认是单例 通过注解@Scope("prototype"),将其设置为多例模式 参考: 曾经面试的时候有面试官问我spring的controller是单例还是多例,结果我傻逼的回答 ...

  8. cnblog 开通啦!

    喜大普奔! 终于开通cnblog了!以后有blog都会放这里哦 > o < 希望大家可以关注窝哦.

  9. Redis常用命令操作

    字符串类型: * 存储:set key value * 获取:get key * 无值返回nil * 删除:del key 哈希类型 hash: * 存储:hset key field value * ...

  10. C++代码书写规范——给新手程序员的一些建议

    代码就是程序员的面子,无论是在工作中在电脑上写程序代码还是在面试时在纸上写演示代码我们都希望写出整洁,优雅的代码.特别在工作中当我们碰到需要维护别人的代码,或者是多人参与一个项目大家一起写代码的时候, ...