Home » jQuery » $.each()

$.each()

译自官方手冊:jQuery.each()

对数组或对对象内容进行循环处理

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

collection   遍历的对象或数组

callback(indexInArray, valueOfElement) 在每个对象上调用的函数

说明

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

$.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历不论什么的集合(不管是数组或对象),假设是数组,回调函数每次传入数组的索引和相应的值(值亦能够通过this keyword获取,但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>

随机推荐

  1. iPhone真机测试Crash信息分析

    一.获取Crash Log的方式 在iOS开发过程,当应用已经打包,iPhone设备通过ipa的包安装应用后,在使用过程发现crash,那么如何获取crash日志呢,现提供如下四种获取crash日志的 ...

  2. Swift - 19 - 字典的初始化

    //: Playground - noun: a place where people can play import UIKit // 注意: swift中的字典用的也是中括号, 和OC的大括号是不 ...

  3. Ubuntu下管理员界面的切换

    不同于redhat的Linux系统可以通过命令su root 简单地切换到管理员状态,ubuntn 默认是没有超级用户的,因此如需使用管理员权限可以使用以下2种方法: 1.sudo -i 此命令不需要 ...

  4. firebug js版

    1.有些时候如 ie6 7 8 你觉得F12 不好用的话  你可以直接 把这两个js 引用到html 里面 <script src="https://getfirebug.com/fi ...

  5. TCP连接的状态分析

    1.先来了解一下TCP连接建立与关闭过程中的各种状态: CLOSED:初始状态,表示没有任何连接.LISTEN:Server端的某个Socket正在监听来自远方的TCP端口的连接请求.SYN_SENT ...

  6. 使用C++11 实现的线程池

    最近打算做一个服务器端程序,每来一个客户端请求新开一个线程进行处理.在网上查了一些资料后,准备使用线程池来做这个东西.使用C++11新的库处理想线程问题比以前简单了许多,在网上找到一份线程池的实现,h ...

  7. IE下的firebug调试利器

    1. 文件调用 把下面js代码,包含在要调试的页面中. <script src="https://getfirebug.com/firebug-lite.js">< ...

  8. DNS递归和迭代原理

    11.3.7 DNS递归解析原理 “递归解析”(或叫“递归查询”,其实意思是一样的)是最常见,也是默认的解析方式.在这种解析方式中,如果客户端配置的本地名称服务器不能解析的话,则后面的查询全由本地名称 ...

  9. Redis系列(2)之数据类型

    Redis系列(2)之数据类型 <Redis系列(1)之安装>中介绍了Redis支持以下几种数据类型,那么本节主要介绍学习下这几种数据类型的基本操作 字符串类型,string 散列类型,h ...

  10. linux下删除修改时间为某天之前的文件

    time_file #新建一个标识文件,修改时间为2014年4月9日0点0分 find . ! -cnewer time_file | xargs rm #删除最后修改时间在上述标识文件之前的所有文件