jquery 循环数组输出显示在html页面
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页面的更多相关文章
- javascript循环遍历数组输出key value
javascript循环遍历数组输出key value用$.each方法肯定不行的 所以采用如下方法<pre> markers = []; markers[2]=3; markers[3] ...
- 对象数组和for循环遍历输出学生的信息
public class Student { private int no; private String name; private int age; public Student(int no, ...
- 使用 JavaScript 用循环嵌套输出乘法表。外循环控制行数,内循环控制当前行要输出的乘法表达式,在页面上输出九九乘法表
查看本章节 查看作业目录 需求说明: 在页面上输出九九乘法表,实现效果如图所示 实现思路: 创建HTML页面 在页面中嵌入 <script type="text/javascript& ...
- 前端开发:setTimeout与setInterval 定时器与异步循环数组
前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...
- JS Jquery去除数组重复元素
js jquery去除数组中的重复元素 第一种:$.unique() 第二种: for(var i = 0,len = totalArray_line.length;i < len;i++) { ...
- JQuery Uplodify上传附件(同一个页面多个uplodify控件解决方案)
功能描述:实现同一页面中多个不同附件的上传保存,且做到最大程度的减少代码修改量(最大程度的公用),为了方便实现垃圾数据和垃圾文件的处理,项目采用临时文件夹的方式:即:文件自动上传先保存到临时文件夹下, ...
- Jquery遍历数组之$().each()方法和$.each()方法
前几天面试碰到了一个笔试问题:用jquery变了数组. 总结一下用jquery遍历数组的两种方法: 一.$().each()方法 <head><meta http-equiv=&qu ...
- js与jquery常用数组方法总结
昨天被问数组方法的时候,问到sort()方法是否会改变原来的数组.本来我猜是不会,也是这么说,马上我又觉得,知识这种东西,不确定的时候直接说不确定或不知道就好,只是凭借着不确定的猜测或者是记忆,害人害 ...
- Java-Runoob-高级教程-实例-数组:05. Java 实例 – 数组输出
ylbtech-Java-Runoob-高级教程-实例-数组:05. Java 实例 – 数组输出 1.返回顶部 1. Java 实例 - 数组输出 Java 实例 以下实例演示了如何通过循环输出数 ...
随机推荐
- SQL2008清空删除日志:
SQL2008清空删除日志: '在SQL2008中清除日志就必须在简单模式下进行,等清除动作完毕再调回到完全模式. USE [master] GO ALTER DATABASE DNName SET ...
- Leetcode题解(十)
29.Divide Two Integers 题目 题目要求不用乘除和取模运算,实现两个整数相除: 我的第一想法就是把除法变成减法来做,这也是最初除法的定义,其实现代码如下: class Soluti ...
- Shape of HDU
Shape of HDU Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- 2015上海赛区B Binary Tree
B - Binary Tree Description The Old Frog King lives on the root of an infinite tree. According to ...
- C# linq左连接与分组
1.左连接使用DefaultIfEmpty(): 2.分组时候判断newper.FirstOrDefault() == null ? null: newper.ToList()这个经常出错误,如果不判 ...
- html 自定义标签使用实现方法
通过指定html命名空间的名字来定义自定义标签:默认的一些标签p div等都在html默认的命名空间下.而自定义的标签可以放在自定义的命名空间下,可通过xmlns:命名空间名 来指定,而自定义标签需要 ...
- ⑨bootstrap组件 按钮式下拉菜单 输入框 使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- Scrum Meeting Alpha - 1 (团队任务分解)
团队任务分解 Alpha阶段项目目标 实现一个博客园班级博客的Android 客户端: 实现班级博客的常用功能(不包括投票.公告.校区) 有一个较为简洁美观.操作方便的界面 添加消息提醒功能. 任务拆 ...
- 前端基于react,后端基于.net core2.0的开发之路(1) 介绍
文章提纲目录 1.前端基于react,后端基于.net core2.0的开发之路(1) 介绍 2.前端基于react,后端基于.net core2.0的开发之路(2) 开发环境的配置,注意事项,后端数 ...
- python20171113笔记
问题一: python {File "<stdin>", line 1} error 解决方法:就是不用先输入 python进入python解释器,而直接输入pytho ...