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 相关文章推荐
javascript中的window.location.search方法简介
Sep 02 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 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/11/16 PHP
php 结果集的分页实现代码
2009/03/10 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
详解JavaScript树结构
2017/01/09 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
Python中的with...as用法介绍
2015/05/28 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
晚宴邀请函范文
2014/01/15 职场文书
后备干部考察材料
2014/02/12 职场文书
乡镇办公室工作决心书
2014/03/11 职场文书
三方合作意向书范本
2015/05/09 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
JS封装cavans多种滤镜组件
2022/02/15 Javascript