$.each()和$().each

（1）在jquery中，遍历对象和数组，经常会用到$().each和$.each()，两个方法。两个方法是有区别的，从而这两个方法在针对不同的操作上，显示了各自的特点。

$().each,对于这个方法，在dom处理上面用的较多。如果页面有多个input标签类型为checkbox，对于这时用$().each来处理多个checkbook，例如：

$(“input[name=’ch’]”).each(function(i){
if($(this).attr(‘checked’)==true)
{
//一些操作代码

}

回调函数是可以传递参数，i就为遍历的索引。

（2）$.each遍历json对象

查看一个简单的jQuery的例子来遍历一个JavaScript数组对象。

var json = [{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},{"id":"5","tagName":"pineapple"}
];$.each(json, function(idx, obj) {alert(obj.tagName);
});

上面的代码片断工作正常，提示 “apple”, “orange” … 等，如预期一样。

问题: JSON 字符串

下面的例子中，声明了一个JSON字符串（随附单或双引号）直接地。

var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]';$.each(json, function(idx, obj) {alert(obj.tagName);
});

在Chrome中，它显示在控制台下面的错误：

Uncaught TypeError: Cannot use 'in' operator to search for '156'
in [{"id":"1","tagName":"apple"}...

解决方案：JSON字符串转换为JavaScript对象。
要修复它，通过标准JSON.parse()或jQuery 的 $.parseJSON 将其转换为JavaScript对象。

var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]';$.each(JSON.parse(json), function(idx, obj) {alert(obj.tagName);
});//or 

$.each($.parseJSON(json), function(idx, obj) {alert(obj.tagName);
});

（3）

例子1:———传入数组

复制代码代码如下:

<!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

例子2:———如果一个映射作为集合使用,回调函数每次传入一个键-值对

复制代码代码如下:

<!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

例子3:———回调函数中 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

例子4:———遍历数组的项, 传入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>

例子5:———遍历对象的属性,传入 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>

$.each()和$().each

问题: JSON 字符串

最新文章

热门文章