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 相关文章推荐
javascript 全等号运算符使用说明
May 31 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
node内置调试方法总结
Feb 22 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
原生JS实现飞机大战小游戏
Jun 09 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 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
PHP常见漏洞攻击分析
2016/02/21 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
Javascript面向对象编程
2012/03/18 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
Farnell德国:电子元器件供应商
2018/07/10 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
城市精细化管理实施方案
2014/03/04 职场文书
股权转让意向书
2014/04/01 职场文书
学生请假条格式
2014/04/11 职场文书
公司演讲稿开场白
2014/08/25 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
课题研究阶段性总结
2015/08/13 职场文书
element tree树形组件回显数据问题解决
2022/08/14 Javascript