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. ubuntu下apache与php配置

    实验环境 uname -a Linux tomato 4.4.0-34-generic #53-Ubuntu SMP Wed Jul 27 16:06:39 UTC 2016 x86_64 x86_6 ...

  2. Pythonchallenge一起来闯关

    http://www.pythonchallenge.com/是一个在线的python过关游戏,一共有33关.玩这个游戏对熟悉python用法及相关库的使用都很有好处. 目前做到了第九关.python ...

  3. 【NEERC 2003】有向图破坏

    [题目描述] Alice和Bob正在玩如下的游戏.首先Alice画一个有N个顶点,M条边的有向图.然后Bob试着摧毁它.在一次操作中他可以找到图中的一个点,并且删除它所有的入边或所有的出边. Alic ...

  4. AutoIt3初探(1)

    AutoIt3可实现系统操作,键盘鼠标模拟,是自动化测试的一个好工具. 这个是在线帮助文档,http://www.jb51.net/shouce/autoit/ 需要先下载一个autoIt安装,然后将 ...

  5. linux dd命令测试U盘读写速度

    1. dd命令简述: if=输入文件, of=输出文件, ibs=一次读取字节数, obs=一次写入字节数, bs=设置一次读取写入的字节数, skip=跳过的bs数, count=拷贝的块数 2. ...

  6. C#制作ActiveX控件及部署升级(摘自网络)

    使用C#开发ActiveX控件 控件开发.制作CAB包.签名.部署 ActiveX控件以前也叫做OLE控件,它是微软IE支持的一种软件组件或对象,可以将其插入到Web页面中,实现在浏览器端执行动态程序 ...

  7. window.showModalDialog以及window.open用法简介

    .可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象.例如:------------------------------parent.htm<script& ...

  8. 安卓环境搭建(1)hellow world

    本系列适合0基础的人员,因为我就是从0开始的,此系列记录我步入Android开发的一些经验分享,望与君共勉!作为Android队伍中的一个新人的我,如果有什么不对的地方,还望不吝赐教. 在开始Andr ...

  9. Delphi笔记(GL_Scene安装及简单使用)

    前一段时间,需要弄一个四轴的监控平台,看了匿名的上位机后,十分感兴趣.于是我也想自己也弄一个上位机来玩玩,在将串口通讯调好了以后,就开始好奇那个3D模型是怎么弄的.在网上面查找了很多资料,由于我用的是 ...

  10. JMS集群部署问题 java.net.ConnectException: Connection refused; No available router to destination

    1:本地spring配置如下 <!-- JndiTemplate --> <bean id="jndiTpl" class="org.springfra ...