JQuery中$.each 和$(selector).each()的区别详解


Posted in Javascript onMarch 13, 2015

一个通用的遍历函数 , 可以用来遍历对象和数组. 数组和含有一个length属性的伪数组对象 (伪数组对象如function的arguments对象)以数字索引进行遍历,从0到length-1, 其它的对象通过的属性进行遍历.

$.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象—尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数。

例子:———传入数组

<!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

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

<!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

例子:———回调函数中 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

例子:———遍历数组的项, 传入index和value

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<script>

$.each( ['a','b','c'], function(i, l){

alert( “Index #” + i + “: ” + l );

});

 

</script>

</body>

</html>

例子:———遍历对象的属性,传入 key和value

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<script>

 

$.each( { name: “John”, lang: “JS” }, function(k, v){

alert( “Key: ” + k + “, Value: ” + v );

});

 

</script>

</body>

</html>

正自评论的例子

1. 如果不想输出第一项 (使用retrun true)进入 下一遍历

 

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<script>

 

var myArray=["skipThis", "dothis", "andThis"];

$.each(myArray, function(index, value) {

if (index == 0) {

return true; // equivalent to ‘continue' with a normal for loop

}

// else do stuff…

alert (index + “: “+ value);

});

 

</script>

</body>

</html>
Javascript 相关文章推荐
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 #Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 #Javascript
JavaScript中常用的六种互动方法示例
Mar 13 #Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 #Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 #Javascript
DOM操作一些常用的属性汇总
Mar 13 #Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 #Javascript
You might like
在项目中寻找代码的坏命名
2012/07/14 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
Python Nose框架编写测试用例方法
2017/10/26 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
小学生成长感言
2014/01/30 职场文书
公证书样本
2014/04/10 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
小学生读书笔记范文
2015/06/30 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技