1、$.each( collection, callback(indexInArray, valueOfElement) )
$.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合，不管是一个JavaScript对象或者是一个数组，如果是一个数组的话，回调函数每次传递一个数组的下标和这个下标所对应的数组的值（这个值也可以在函数体中通过this关键字获取，但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字），这个函数返回所遍历的对象，也就是这个函数的第一个参数，注意这里还是原来的那个数组，这是和map的区别。
其中collection代表目标数组，callback代表回调函数（自己定义），回调函数的参数第一个是数组的下标，第二个是数组的元素。当然我们也可以给回调函数只设定一个参数，这个参数一定是下标，而没有参数也是可以的。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:———传入数组
<!DOCTYPE html>
<html>
<head>
<script src=”http ></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=”h ></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=”htt test.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=”htt 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=”h 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=”ht .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>
2.一个级联下拉框的例子
1. $(function(){
2. function objInit(obj) {//下拉列表框初始化
3. return $(obj).html("<option>请选择</option>");
4. }
5. var arrData = { //定义一个数组保存相关数据
6. "型号1_1_1,型号1_1_2", 品牌1_2: "型号1_2_1,型号1_2_2"
7. "型号2_1_1,型号2_1_2", 品牌2_2: "型号2_2_1,型号2_2_2"
8. "型号3_1_1,型号3_1_2", 品牌3_2: "型号3_2_1,型号3_2_2"
9. };
10.
11. function(pF) { //遍历数据增加厂商项
12. "#selF").append("<option>" + pF + "</option>");
13. });
14.
15. "#selF").change(function() { //厂商列表框选项改变事件
16. "#selT");
17. "#selC");
18.
19. function(pF, pS) {
20. if ($("#selF option:selected").text() == pF) { //如果厂商选中项与数据匹配
21.
22. function(pT, pC) { //遍历数据增加品牌项
23. "#selT").append("<option>" + pT + "</option>");
24. });
25.
26. "#selT").change(function() { //品牌列表框选项改变事件
27. "#selC");
28. function(pT, pC) {
29.
30. if ($("#selT option:selected").text() == pT) { //如果品牌选中项与数据匹配
31.
32. ","), function() { //遍历数据增加型号项
33. "#selC").append("<option>" + this + "</option>");
34. });
35. }
36. });
37. });
38.
39. }
40. });
41. });
42.
43. "#Button1").click(function() { //注册按钮单击事件
44. var strValue = "您选择的厂商:";
45. "#selF option:selected").text();
46. " 您选择的品牌:";
47. "#selT option:selected").text();
48. " 您选择的型号:";
49. "#selC option:selected").text();
50. "#divTip")
51. .show()
52. "clsTip")
53. //显示提示信息并增加样式
54. });
55.
56. })本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
