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 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
javascript 自定义事件初探
Aug 21 Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
JavaScript运行机制实例分析
Apr 11 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
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
js定时器实现倒计时效果
2017/11/05 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
python中实现定制类的特殊方法总结
2014/09/28 Python
Python易忽视知识点小结
2015/05/25 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
python可以用哪些数据库
2020/06/22 Python
如何一键升级Python所有包
2020/11/05 Python
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
七年级英语教学反思
2014/01/15 职场文书
上课说话检讨书大全
2014/01/22 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
商业门面租房协议书
2014/11/25 职场文书
个人工作表现自我评价
2015/03/06 职场文书