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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 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 print类函数使用总结
2010/06/25 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
《花木兰》教学反思
2014/04/09 职场文书
工程负责人任命书
2014/06/06 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
商务宴会祝酒词
2015/08/11 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers