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 相关文章推荐
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
Javascript中For In语句用法实例
May 14 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 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使用curl存储cookie的示例
2014/03/31 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
PHP常用处理静态操作类
2015/04/03 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
numpy排序与集合运算用法示例
2017/12/15 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
简单了解Django ContentType内置组件
2019/07/23 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
意大利男装网店:Vrients
2019/05/02 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
创建青年文明号材料
2014/05/09 职场文书
支部组织生活会方案
2014/06/10 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android