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. 统计机器翻译(SMT)步骤总结

    本文是在Niutrans论坛中的系列教程中总结出来的. 1.语料预处理 预处理的结果是生成双语分词之后的文件,该步需要注意的是对规则短语,比如数字.日期.网址等,进行泛化处理.可以用正则方法或者其它方 ...

  2. web初识-tomcat的基本使用

    Web入门 1.  软件结构: C/S :       有客户端, 维护较麻烦, 需要客户端和服务器端都更新. B/S :       优点 : 客户端就是浏览器, 更新方便, 只需要更新服务器端即可 ...

  3. hibernate_validator_08

    内置的约束条件 Hibernate Validator包含了一些基本的使用比较广的约束,下面是一些Hibernate Validator给出的最常用的约束.另外Hibernate Validator还 ...

  4. 3DMAX-模型制作简介

    本文由博主(YinaPan)原创,转载请注明出处:http://www.cnblogs.com/YinaPan/p/3dmax_moxingzhizuo.html  一.快捷键: ALT + X 透明 ...

  5. JQUERY1.9学习笔记 之基本过滤器(九) 小于选择器

    小于选择器 jQuery( ":lt(index)" ) jQuery( ":lt(-index)" ) 描述:选择所有小于指定下标的元素. <!DOCT ...

  6. nginx反向代理取得IP地址

    nginx反向代理后,在应用中取得的ip都是反向代理服务器的ip,取得的域名也是反向代理配置的url的域名,解决该问题,需要在nginx反向代理配置中添加一些配置信息,目的将客户端的真实ip和域名传递 ...

  7. C# ORM—Entity Framework 之Code first(代码优先)(二)

    一.Entity Framework Code first(代码优先)使用过程 1.1Entity Framework 代码优先简介 不得不提Entity Framework Code First这个 ...

  8. 2-路插入排序(2-way Insertion Sort)的C语言实现

    原创文章,转载请注明来自钢铁侠Mac博客http://www.cnblogs.com/gangtiexia   2-路插入排序(2-way Insertion Sort)的基本思想:     比fis ...

  9. hdu 1241 Oil Deposits(DFS求连通块)

    HDU 1241  Oil Deposits L -DFS Time Limit:1000MS     Memory Limit:10000KB     64bit IO Format:%I64d & ...

  10. 前端自动化之babel本地化安装

    npm添加package.json cd到项目根目录直接调用npm init 会创建package.json文件 本地安装bebel(并非全局安装,这种情况下cmd命令中babel命令不识别): 步骤 ...