jquery 循环数组输出显示在html页面

时间:2022-12-26 08:58:18

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);
}

jquery 循环数组输出显示在html页面

这里对子元素点击事件传入的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>
jquery 循环数组输出显示在html页面

页面效果如下:

jquery 循环数组输出显示在html页面

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

jquery 循环数组输出显示在html页面

博文出处: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遍历数组之&dollar;&lpar;&rpar;&period;each&lpar;&rpar;方法和&dollar;&period;each&lpar;&rpar;方法

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

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

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

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

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

随机推荐

  1. JS 前端格式化JSON字符串工具

    JSON格式化工具,简易实现.作为技术宅,直接上代码,供大家使用.前提:一定要引入jquery哦. <!DOCTYPE html> <html lang="en" ...

  2. &lbrack;原创作品&rsqb; javascript 实现的web分页器原理

    很久没有写博客了,因为最近忙于一些杂七杂八的事情.不过,互联网的价值在于信息共享,因为共享,所以互联网才能飞快发展.博主建了一个技术共享qq群:164858883,因为目前人数还比较少,活跃度还不是很 ...

  3. 继承control的自定义TextBox

    继承control的自定义TextBox 下面来介绍一下本人写的一个自定义的textbox,首先说一下写这个控件遇到的几个难点:第一.关联输入法:第二.画字符串和焦点线 先随便上两张效果图吧: 下面这 ...

  4. javascript中自定义事件

    自定义事件:用户可以指定事件类型,这个类型实际上就是一个字符串,然后为这个类型的事件指定事件处理函数,可以注册多个事件处理函数(用数组管理),调用时,从多个事件处理函数中找到再调用. function ...

  5. 图之单源Dijkstra算法、带负权值最短路径算法

    1.图类基本组成 存储在邻接表中的基本项 /** * Represents an edge in the graph * */ class Edge implements Comparable< ...

  6. XBMC源代码分析 7:视频播放器(dvdplayer)-输入流(以libRTMP为例)

    前文分析了XBMC的基本结构: XBMC源代码分析 1:整体结构以及编译方法 XBMC源代码分析 2:Addons(皮肤Skin) XBMC源代码分析 3:核心部分(core)-综述 XBMC源代码分 ...

  7. draw9patch图片拉伸

    在此吐槽Android studio的稳定性,我用的Android studio已经完全不能用了.只要新建项目资源文件就会变成乱码.解决无果,忍无可忍的我只能重新下了一个低版本的.虽然还是有点毛病,但 ...

  8. lua -- io&period;pathinfo

    io.pathinfo 拆分一个路径字符串,返回组成路径的各个部分. 格式: parts = io.pathinfo(路径) 使用示例: local pathinfo = io.pathinfo(&q ...

  9. JDBC及DBUtils

    1.JDBC2.DBUtils ###01JDBC概念和数据库驱动程序 * A: JDBC概念和数据库驱动程序 * a: JDBC概述 * JDBC(Java Data Base Connectivi ...

  10. hdu 6114 chess(排列组合)

    Chess Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...