• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery中$.each()函数的用法引申实例

jQuery中$.each()函数的用法引申实例

作者:天梯梦 字体:[增加 减小] 来源:互联网

天梯梦 通过本文主要向大家介绍了jQuery,$.each(),遍历,JavaScript,js等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

语法:

$.each( collection, callback(indexInArray, valueOfElement) ) 

值得一提的是,forEach 可以很方便的遍历数组和 NodeList ,jQuery 中的 jQuery 对象本身已经部署了这类遍历方法,而在原生 JavaScript 中则可以使用 forEach 方法,但是 IE 并不支持,因此我们可以手动把 forEach 方法部署到数组和 NodeList 中:

if ( !Array.prototype.forEach ){
  Array.prototype.forEach = function(fn, scope) {
    for( var i = 0, len = this.length; i < len; ++i) {
      fn.call(scope, this[i], i, this);
    }
  }
}
 
// 部署完毕后 IE 也可以使用 forEach 了
document.getElementsByTagName('p').forEach(function(e){
 
  e.className = 'inner';
});

而jQuery中的$.each()函数则更加强大。$.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合,不管是一个JavaScript对象或者是一个数组,如果是一个数组的话,回调函数每次传递一个数组的下标和这个下标所对应的数组的值(这个值也可以在函数体中通过this关键字获取,但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字),这个函数返回所遍历的对象,也就是这个函数的第一个参数,注意这里还是原来的那个数组,这是和map的区别。
其中collection代表目标数组,callback代表回调函数(自己定义),回调函数的参数第一个是数组的下标,第二个是数组的元素。当然我们也可以给回调函数只设定一个参数,这个参数一定是下标,而没有参数也是可以的。

例1:传入数组

<!DOCTYPE html> 
<html> 
<head> 
<script src=”http://code.jquery.com/jquery-latest.js”></script> 
</head> 
<body> 
<script> 

$.each([52, 97], function(index, value) { 
alert(index + ‘: ‘ + value); 
}); 

</script> 
</body> 
</html> 

输出:

0: 52 
1: 97 

例2:如果一个映射作为集合使用,回调函数每次传入一个键-值对

<!DOCTYPE html> 
<html> 
<head> 
<script src=”http://code.jquery.com/jquery-latest.js”></script> 
</head> 
<body> 
<script> 

var map = { 
‘flammable': ‘inflammable', 
‘duh': ‘no duh' 
}; 
$.each(map, function(key, value) { 
alert(key + ‘: ‘ + value); 
}); 

</script> 
</body> 
</html> 

输出:

flammable: inflammable 
duh: no duh 

例3:回调函数中 return false时可以退出$.each(), 如果返回一个非false 即会像在for循环中使用continue 一样, 会立即进入下一个遍历

<!DOCTYPE html> 

<html> 

<head> 

 <style> 

 div { color:blue; } 

 div#five { color:red; } 

 </style> 

 <script src=”http://code.jquery.com/jquery-latest.js”></script> 

</head> 

<body> 

 <div id=”one”></div> 

 <div id=”two”></div> 

 <div id=”three”></div> 

 <div id=”four”></div> 

 <div id=”five”></div> 

<script> 

  var arr = [ "one", "two", "three", "four", "five" ];//数组 

  var obj = { one:1, two:2, three:3, four:4, five:5 }; // 对象 

  jQuery.each(arr, function() { // this 指定值 

   $(“#” + this).text(“Mine is ” + this + “.”); // this指向为数组的值, 如one, two 

    return (this != “three”); // 如果this = three 则退出遍历 

  }); 

  jQuery.each(obj, function(i, val) { // i 指向键, val指定值 

   $(“#” + i).append(document.createTextNode(” – ” + val)); 

  }); 

</script> 

</body> 

</html> 

输出 :

Mine is one. – 1 
Mine is two. – 2 
Mine is three. – 3 
- 4 
- 5 

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
  • flexigrid 类似ext grid的JS表格代码
  • jQuery html表格排序插件tablesorter使用方法详解
  • jQuery简易时光轴实现方法示例
  • c#+JQurey实现获取radio和checkbox的值
  • 基于jquery创建的一个图片、视频缓冲的效果样式插件
  • jQuery powerFloat万能浮动层下拉层插件使用介绍
  • jQuery简单实现MD5加密的方法
  • 基于jquery实现无限级树形菜单
  • jquery的ajax()函数传值中文乱码解决方法介绍

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Tinymce+jQuery.Validation使用产生的BUG
    • 基于jquery实现后台左侧菜单点击上下滑动显示
    • jquery给图片添加鼠标经过时的边框效果
    • 跟我一起学JQuery插件开发
    • 关于jquery动态增减控件的一些想法和小插件
    • jquery任意位置浮动固定层插件用法实例
    • EasyUI在表单提交之前进行验证的实例代码
    • Jquery阻止事件冒泡 event.stopPropagation
    • jquery slibings选取同级其他元素的实现代码
    • jQuery基于当前元素进行下一步的遍历

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有