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 EXCEL 操作类代码
Jul 30 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
vue实现选中效果
Oct 07 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
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
php生成HTML文件的类方法
2019/10/11 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
Python采用Django制作简易的知乎日报API
2016/08/03 Python
python 基础教程之Map使用方法
2017/01/17 Python
Python实现图片拼接的代码
2018/07/02 Python
Django 路由控制的实现代码
2018/11/08 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
django之自定义软删除Model的方法
2019/08/14 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
教师实习的自我鉴定
2013/10/26 职场文书
高一政治教学反思
2014/01/28 职场文书
党支部公开承诺书
2014/03/28 职场文书
学期评语大全
2014/04/30 职场文书
副总经理任命书
2014/06/05 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
会计岗位职责范本
2015/04/02 职场文书