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 相关文章推荐
Jquery+JSon 无刷新分页实现代码
Apr 01 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
20个最新的jQuery插件
Jan 13 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
浅析javascript函数表达式
Feb 10 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
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
一贴学会PHP 新手入门教程
2009/08/03 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
使用隐藏的new来创建对象
2011/03/29 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
跟老齐学Python之正规地说一句话
2014/09/28 Python
详细探究Python中的字典容器
2015/04/14 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
24式加速你的Python(小结)
2019/06/13 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
将相和教学反思
2014/02/04 职场文书
环境建设实施方案
2014/03/14 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
python glom模块的使用简介
2021/04/13 Python
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫