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效果如下:

时间: 2024-10-10 22:34:59

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

将二维数组输出到excel,显示带行头的表以及列能手动改变宽度

将二维数组输出到excel,例子在我的helpfunction里面 简单的例子在这:http://www.blogjava.net/hezhi/articles/POI.html Poi包在这里下载:http://mvnrepository.com/artifact/org.apache.poi/poi/3.11-beta3 显示带行头的表以及列能手动改变宽度 http://erbo2008.iteye.com/blog/547182

Smarty教程1.引擎定义2.主要优点3.简明教程4.使用判断5.循环数组6.常见问题8.解释程序

Smarty是一个php模板引擎.更准确的说,它分开了逻辑程序和外在的内容,提供了一种易于管理的方法.可以描述为应用程序员和美工扮演了不同的角色,因为在大多数情况下 ,他们不可能是同一个人.例如,你正在创建一个用于浏览新闻的网页,新闻标题,标签栏,作者和内容等都是内容要素,他们并不包含应该怎样去呈现.在Smarty的程序里,这些被忽略了.模板设计者们编辑模板,组合使用html标签和模板标签去格式化这些要素的输出(html表格,背景色,字体大小,样式表,等等).有一天程序员想要改变文章检索的方式(

JS Jquery去除数组重复元素

js jquery去除数组中的重复元素 第一种:$.unique() 第二种: for(var i = 0,len = totalArray_line.length;i < len;i++) { !RegExp(totalArray_line[i],"g").test(resultArray_line.join(",")) && (resultArray_line.push(totalArray_line[i])); }-----解决了V0.2

随机数数组输出及求和

问题描述: 随机生成10个数,填充一个数组,然后用消息框显示数组内容,接着计算数组元素的和,将结果也显示在消息框中. 设计思路: 使用java.util中的Random类来获取随机数,存入数组后,定义一个String类的对象result,利用for循环存储要输出的数组内容到result并且求和:再利用javax.swing中的JoptionPane类创建消息框进行结果输出. 源代码: 1 import java.util.*; 2 import javax.swing.*; 3 public c

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

功能描述:实现同一页面中多个不同附件的上传保存,且做到最大程度的减少代码修改量(最大程度的公用),为了方便实现垃圾数据和垃圾文件的处理,项目采用临时文件夹的方式:即:文件自动上传先保存到临时文件夹下,在保存数据之后移动文件到正式目录,页面上对附件的所有操作只有用户点击“保存”后起效.插件名称及版本:Uploadify v3.1.1. 解决方案: 1.引用(页面开头): <link href="~/Scripts/UploadsFile/uploadify.css" rel=&qu

jquery实现图片预加载提高页面加载速度

使用jquery实现图片预加载提高页面加载速度和用户体 我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题 呢?首先我们会想到的是提高服务器性能,使用静态缓存等手段来加快图片的加载速度,这的确是个好方法,不过有时候我们也可以从前台找一些解决的 方法.下面我来介绍一种在实际应用中经常会使用到的js预加载的方法. 首先在输出图片的时候我们做一些处理 处理完html我们开始写js了,在这里我使用了jquery的类库

二维循环数组最大子数组的和

结对成员:于海洋  袁佩佩 一.题目及要求 题目:返回一个二维整数数组中最大子数组的和. 要求: 输入一个二维整形数组,数组里有正数也有负数.    二维数组首尾相接,象个一条首尾相接带子一样.     数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和.  求所有子数组的和的最大值.要求时间复杂度为O(n). 二.设计思路 用之前的二维数组求最大子数组的和的代码,将控制条件改一下.每次循环时,第一行循环len1个数,len1是数组的列数等到循环到末尾时,再接上第一列… 三.源代码

js与jquery常用数组方法总结

转载:http://www.cnblogs.com/codetker/p/4676899.html 昨天被问数组方法的时候,问到sort()方法是否会改变原来的数组.本来我猜是不会,也是这么说,马上我又觉得,知识这种东西,不确定的时候直接说不确定或不知道就好,只是凭借着不确定的猜测或者是记忆,害人害己,于是我又回答不知道.结果果然...我记错了0.0 还是自己总结测试一下比较靠谱,印象也比较深刻.欢迎大家提出相关意见或建议,提前谢谢哈~ 一.原生js方法 1.遍历数组 in(同时也是对象遍历属性

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

前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的,在与博友的分享中可以学到新的知识.得到先驱者的指正.解决工作中遇到的难题.近一个月工作繁忙,新的文章也迟迟未写,今天呢,过来深入了解一下 关于javascript定时器的知识: setTimeout与setInterval简述 setTimeout与setInterval使用方法基本相同,他们接受两