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 相关文章推荐
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
js实现右键自定义菜单
Dec 03 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 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
PHP中Memcache操作类及用法实例
2014/12/12 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
Python中使用中文的方法
2011/02/19 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
python实现windows下文件备份脚本
2018/05/27 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
毕业生银行实习自我鉴定
2014/10/14 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
现实表现证明材料
2015/06/19 职场文书
关于远足的感想
2015/08/10 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python