本文将对 jQuery each() 函数作一个比较全面的介绍。 each() 函数是 jQuery 中最重要也是最常用的函数之一。通过本文你将明白为什么 each() 函数如此大放异彩，同时还将详细介绍如何使用 each() 函数。
什么是 jQuery .each()
jQuery 的 each() 函数用来遍历目标 jQuery 对象中的所有元素。在这里解释一下什么是 jQuery 对象，以防有读者还不太清楚。 jQuery 对象指的是包含一个或多个 DOM 元素的对象，并且暴露出所有的 jQuery 函数。 each() 函数非常适合操作多元素的 DOM 、任意数组的循环以及对象的属性。除了这个函数， jQuery 里还有一个同名的辅助函数，不需要事先选择或创建 DOM 元素就可以调用这个辅助函数。在接下来的部分将更详细地介绍它们。
jQuery 的 .each() 语法
这里将结合实际例子讲解 .each() 的不同用法。
下面这个例子选中了网页上所有 div 标签，并打印每个 div 标签的 index 和 ID。输出的结果可能是： “div0:header”、 “div1:body”、 “div2:footer”。 jQuery 中 each() 函数的这种用法和效用函数的用法完全不同。
|
1 2 3 4 |
// DOM ELEMENTS $('div').each(function (index, value) { console.log('div' + index + ':' + $(this).attr('id')); }); |
下一个例子展示了效用函数的用法。在这个例子当中，把被循环的对象当作 each() 函数的第一个参数。这个例子展示了如何遍历一个数组：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// ARRAYS var arr = [ 'one', 'two', 'three', 'four', 'five' ]; $.each(arr, function (index, value) { console.log(value); // Will stop running after "three" return (value !== 'three'); }); // Outputs: one two three |
最后这个例子中，遍历了一个对象中的所有属性：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// OBJECTS var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 }; $.each(obj, function (index, value) { console.log(value); }); // Outputs: 1 2 3 4 5 |
这一切都归结为提供了适当的回调函数。这个回调函数的上下文， this ，等于它的第二个参数，也就是当前的 value 值。通常上下文都是一个对象，所以得把原始值封装起来。也就是说，这个 value 值和上下文之间不存在严格相等关系。 回调函数的第一个参数是当前的 index，它可能是数组里一个数字或对象中一个字符串。
1.基本的 jQuery.each() 实例
一起来看看 each() 函数是如何处理一个 jQuery 对象的。第一个例子中选择了页面中所有的 a 标签，并打印出它们的 href 属性。
|
1 2 3 |
$('a').each(function (index, value){ console.log($(this).attr('href')); }); |
第二个例子中输出了网页上所有的外链 href 属性（这里我们假设只用了 HTTP 协议）：
|
1 2 3 4 5 6 7 |
$('a').each(function (index, value){ var link = $(this).attr('href'); if (link.indexOf('http://') === 0) { console.log(link); } }); |
假设当前页面中有如下这些链接：
|
І对 jQuery each() 函数作一个比较全面的介绍。 each() 函数是 jQuery 中最重要也是最常用的函数之一。通过本文你将明白为什么 each() 函数如此大放异彩，同时还将详细介绍如何使用 each() 函数。
什么是 jQuery .each()jQuery 的 each() 函数用来遍历目标 jQuery 对象中的所有元素。在这里解释一下什么是 jQuery 对象，以防有读者还不太清楚。 jQuery 对象指的是包含一个或多个 DOM 元素的对象，并且暴露出所有的 jQuery 函数。 each() 函数非常适合操作多元素的 DOM 、任意数组的循环以及对象的属性。除了这个函数， jQuery 里还有一个同名的辅助函数，不需要事先选择或创建 DOM 元素就可以调用这个辅助函数。在接下来的部分将更详细地介绍它们。 jQuery 的 .each() 语法这里将结合实际例子讲解 .each() 的不同用法。 下面这个例子选中了网页上所有 div 标签，并打印每个 div 标签的 index 和 ID。输出的结果可能是： “div0:header”、 “div1:body”、 “div2:footer”。 jQuery 中 each() 函数的这种用法和效用函数的用法完全不同。
下一个例子展示了效用函数的用法。在这个例子当中，把被循环的对象当作 each() 函数的第一个参数。这个例子展示了如何遍历一个数组：
最后这个例子中，遍历了一个对象中的所有属性：
这一切都归结为提供了适当的回调函数。这个回调函数的上下文， this ，等于它的第二个参数，也就是当前的 value 值。通常上下文都是一个对象，所以得把原始值封装起来。也就是说，这个 value 值和上下文之间不存在严格相等关系。 回调函数的第一个参数是当前的 index，它可能是数组里一个数字或对象中一个字符串。 1.基本的 jQuery.each() 实例 一起来看看 each() 函数是如何处理一个 jQuery 对象的。第一个例子中选择了页面中所有的 a 标签，并打印出它们的 href 属性。
第二个例子中输出了网页上所有的外链 href 属性（这里我们假设只用了 HTTP 协议）：
假设当前页面中有如下这些链接：
|
