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 相关文章推荐
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 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
删除无限级目录与文件代码共享
2006/07/12 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
Python的净值数据接口调用示例分享
2016/03/15 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
python处理RSTP视频流过程解析
2020/01/11 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
init进程的作用
2015/08/20 面试题
主治医师岗位职责
2013/12/10 职场文书
道德模范先进事迹
2014/02/14 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
个人授权委托书格式
2014/08/30 职场文书
公务员个人总结
2015/02/12 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB