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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
JSON 数据格式介绍
Jan 13 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
JSONP原理及简单实现
Jun 08 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
Vue父子传递实例讲解
Feb 14 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错误日志 display_errors与log_errors的区别
2012/10/09 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
jquery 上下滚动广告
2009/06/17 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
Python模块学习 datetime介绍
2012/08/27 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
python机器学习之随机森林(七)
2018/03/26 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Python线程指南分享
2019/11/19 Python
Python post请求实现代码实例
2020/02/28 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
Python调用飞书发送消息的示例
2020/11/10 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
国际书籍零售商:Wordery
2017/11/01 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
演讲稿开场白
2014/01/13 职场文书
募捐感谢信
2015/01/22 职场文书
项目建议书
2015/02/04 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers