jquery 没有双向数据绑定,但是很多需求确实需要我们从后台接收到数组或者对象循环显示在前台页面上,这时我们可以用字符串拼接,元素添加的方法去实现

js部分如下

$(function(){
var a=["1aa","2bb","3cc"];
$("#come").click(function(){
var div1='<div class="yk" onclick="cheakitem(this)" style="background: red; margin-top: 5px;">';
var div2='</div>';
$.each(a,function(i,t){
$("#shu").append(div1+t+div2);
})
});
})
function cheakitem(e){
var es=$(e)
console.log(es);
var edata=es.html();
$(e).parent('#shu').siblings('#come').html(edata);
}

这里对子元素点击事件传入的this作出了打印,供新手去学习,灵活使用。以便下一步的业务处理。注意:你们会发现,重复点击会不断添加元素,所以需要在循环前添加
$("#shu").empty();清空父元素

div标签:

<div id="da" style="width: 300px;height:200px ; background: #CCCCCC; ">
<div id='come' style="height: 20px; background: #e6a475;"> 点击触发</div>
<div id="shu">
</div>
</div>

页面效果如下:

点击子元素1aa效果如下:

博文出处:http://www.cnblogs.com/mobeisanghai/p/7457807.html,如有转载请标明文章出处

jquery 循环数组输出显示在html页面的更多相关文章

  1. javascript循环遍历数组输出key value

    javascript循环遍历数组输出key value用$.each方法肯定不行的 所以采用如下方法<pre> markers = []; markers[2]=3; markers[3] ...

  2. 对象数组和for循环遍历输出学生的信息

    public class Student { private int no; private String name; private int age; public Student(int no, ...

  3. 使用 JavaScript 用循环嵌套输出乘法表。外循环控制行数,内循环控制当前行要输出的乘法表达式,在页面上输出九九乘法表

    查看本章节 查看作业目录 需求说明: 在页面上输出九九乘法表,实现效果如图所示 实现思路: 创建HTML页面 在页面中嵌入 <script type="text/javascript& ...

  4. 前端开发:setTimeout与setInterval 定时器与异步循环数组

    前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...

  5. JS Jquery去除数组重复元素

    js jquery去除数组中的重复元素 第一种:$.unique() 第二种: for(var i = 0,len = totalArray_line.length;i < len;i++) { ...

  6. JQuery Uplodify上传附件(同一个页面多个uplodify控件解决方案)

    功能描述:实现同一页面中多个不同附件的上传保存,且做到最大程度的减少代码修改量(最大程度的公用),为了方便实现垃圾数据和垃圾文件的处理,项目采用临时文件夹的方式:即:文件自动上传先保存到临时文件夹下, ...

  7. Jquery遍历数组之$().each()方法和$.each()方法

    前几天面试碰到了一个笔试问题:用jquery变了数组. 总结一下用jquery遍历数组的两种方法: 一.$().each()方法 <head><meta http-equiv=&qu ...

  8. js与jquery常用数组方法总结

    昨天被问数组方法的时候,问到sort()方法是否会改变原来的数组.本来我猜是不会,也是这么说,马上我又觉得,知识这种东西,不确定的时候直接说不确定或不知道就好,只是凭借着不确定的猜测或者是记忆,害人害 ...

  9. Java-Runoob-高级教程-实例-数组:05. Java 实例 – 数组输出

    ylbtech-Java-Runoob-高级教程-实例-数组:05. Java 实例 – 数组输出 1.返回顶部 1. Java 实例 - 数组输出  Java 实例 以下实例演示了如何通过循环输出数 ...

随机推荐

  1. 运行第一个Go Web框架

    GO 语言的web框架很多,相对来说, Beego 框架,入门简单,文档齐全(中文),功能强大,本文以Beego 示例. Beego提供了详细的开发文档:http://beego.me/docs/in ...

  2. 如何让Vim成为我们的神器

    Vim 是 Linux 系统上的最著名的文本/代码编辑器,也是早年的 Vi 编辑器的加强版,而 gVim 则是其 Windows 版.它的最大特色是完全使用键盘命令进行编辑,脱离了鼠标操作虽然使得入门 ...

  3. kettle闪退问题

    确定Java的配置环境没问题 kettle闪退的时候把spoon.bat里面的配置项改一下 if "%PENTAHO_DI_JAVA_OPTIONS%"=="" ...

  4. IOS学习——iphone X的适配

    说实话,对于一个刚入门iOS两个月的新手而言,在拿到这个任务的时候整个人都是懵逼的,怎么做适配?哪些地方需要适配?该怎么做?一个个问题搞得头都大了. 首先,啥都不管,先在iPhone X上运行起来看看 ...

  5. Nginx Location 匹配

    location匹配命令 ~      #波浪线表示执行一个正则匹配,区分大小写~*    #表示执行一个正则匹配,不区分大小写^~    #^~表示普通字符匹配,如果该选项匹配,只匹配该选项,不匹配 ...

  6. 关于缓存问题:js清除缓存

    css并行加载,js串行加载(会阻塞页面) 清除缓存的问题: 1.一般手动清除,浏览器缓存 2.js代码清除缓存(原理:增加了一个参数,且该参数是一个随机数,每次都不一样,所以每次的请求参数都不一样, ...

  7. HTML5新特性之WebRTC[转]

    原文:http://www.cnblogs.com/jscode/p/3601648.html?comefrom=http://blogread.cn/news/ 1.概述 WebRTC是“网络实时通 ...

  8. CentOS6软raid配置与管理

    事先添加硬盘设备sdb.sdc.sdd.sde.无论是物理硬盘还是虚拟硬盘,最好使用同型号同大小的硬盘. 创建raid设备 支持raid0.1.4.5.6级别 # mdadm -C /dev/md0 ...

  9. SQL Server分组查询某最大值的整条数据(包含linq写法)

    想实现如下效果,就是分组后时间最大的那一条数据: 1.SQL SELECT * FROM ( SELECT * , ROW_NUMBER() OVER ( PARTITION BY RIP_GUID ...

  10. Linux常用配置讲解

    本文主要讲解Linux的用户设置.主机名设置.网络配置.防火墙配置 用户传输包的命令lrzsz的安装以及SSH服务配置等基本操作. 1. 用户名设置 服务肯定是为了用户,而用户可能对于Linux并不了 ...