jQuery通用的全局遍历方法$.each()用法实例


Posted in Javascript onJuly 04, 2016

本文实例讲述了jQuery通用的全局遍历方法$.each()用法。分享给大家供大家参考,具体如下:

1.test.json文件代码:

[
 {
  "username": "张三",
  "content": "沙发."
 },
 {
  "username": "李四",
  "content": "板凳."
 },
 {
  "username": "王五",
  "content": "地板."
 }
]

2.html代码:

<p>
<input type="button" id="send" value="加载"/>
</p>
<div class="comment">已有评论:</div>
<div id="resText" ></div>

3.jQuery代码:

<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
1.$.each()是jquery的一个通用的遍历方法,可用于遍历对象和数组
2.$.each()函数不同于jquery对象的each()方法,它是一个全局函数,不操作jquery对象,而是以一个数组或者对象作为第一个参数,以一个回调函数作为第二个参数。回调函数拥有两个参数:第一个参数为对象的成员或数组的索引,第二个参数为对应变量或内容
*/
$(function(){
    $('#send').click(function() {
       $.getJSON('test.json', function(data) {
         $('#resText').empty();
         var html = '';
         $.each( data , function(commentIndex, comment) {
           html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
         })
         $('#resText').html(html);
      })
    })
})
</script>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
javascript验证身份证号
Mar 03 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
Javascript call及apply应用场景及实例
Aug 26 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 #Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 #Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 #Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 #Javascript
全面了解js中的script标签
Jul 04 #Javascript
jQuery基础_入门必看知识点
Jul 04 #Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 #Javascript
You might like
解析CodeIgniter自定义配置文件
2013/06/18 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
深入解析Python中的urllib2模块
2015/11/13 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
python 实现音频叠加的示例
2020/10/29 Python
python中常用的数据结构介绍
2021/01/12 Python
python SOCKET编程基础入门
2021/02/27 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
生日邀请函范文
2014/01/13 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
光荣之路观后感
2015/06/12 职场文书
《观察物体》教学反思
2016/02/17 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
Java的Object类的九种方法
2022/04/13 Java/Android