本案例通过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」贪心的导游 传送门 多次询问区间内%一个数的最大值 我们不妨设这个数为M_sea 值域比较小所以考虑分块维护. 我们观察到对于给定的一个 \(p\) ,函数 \(y = x \% ...

  2. 同步I/O和异步I/O

    同步I/O包括:阻塞,非阻塞,多路复用 阻塞模型:给你送的外卖到了,给你打电话,你不去取,外卖小哥一直在那等你,直到你来,形成阻塞,当然应该给外卖小哥点赞,哈哈哈哈!! 非阻塞模型:取外卖的主人非常饿 ...

  3. combotree(组合树)的使用

    一.前言: 组合树(combotree)把选择控件和下拉树结合起来.它与组合框(combobox)相似,不同的是把列表替换成树组件.组合树(combotree)支持带有用于多选的树状态复选框的树. 二 ...

  4. 攻防世界 web 进阶区 刷题记录

    1.Training-WWW-Robots 题目提示了robots协议,直接访问robots.txt 继续访问fl0g.php 2.baby_web 题目描述:想想初始页面是哪个 百度搜了下,inde ...

  5. Linux 笔记:文件名

    文件名 Linux 系统区分英文字符的大小写.比如,myfile, Myfile 和 myFILE表示的是三个不同的文件.同样,用户密码和登录名也需要区分大小写(这里沿用了Unix 和 C 语言的命名 ...

  6. Springboot学习:介绍与HelloWorld

    1. 什么是 Spring boot Spring Boot来简化Spring应用开发,约定大于配置,去繁从简,just run就能创建一个独立的,产品级别的应用 整个Spring技术栈的一个大整合 ...

  7. 三天的Python课程

    基础很sb但必须熟练掌握: 第一天就是Python的简单介绍与简单的接触.基本都是概念性的东西,需要知道一个非常便捷的IDE工具:pycharm,以后的编程就靠它了.还有就是%s和%d的格式化输出.运 ...

  8. 吴裕雄 python 神经网络——TensorFlow 花瓣分类与迁移学习(2)

    import glob import os.path import numpy as np import tensorflow as tf from tensorflow.python.platfor ...

  9. Update(Stage5):Kudu_javaApi使用_Spark整合

    Table of Contents: 2.3. 安装 Zookeeper 2.4. 安装 Hadoop 2.4. 安装 MySQL 2.5. 安装 Hive 2.6. 安装 Kudu 2.7. 安装 ...

  10. 为typecho添加分类描述

    typecho 默认主题不显示分类描述,可以调整为显示 按找官方文档(点击查看),获取分类描述的代码为: <?php echo $this->getDescription(); ?> ...