$.each()和$().each

最新推荐文章于 2020-05-19 16:27:13 发布

DHASA

最新推荐文章于 2020-05-19 16:27:13 发布

阅读量467

点赞数

分类专栏： web前台

web前台专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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