jQuery的$.each()函数是全局函数,用于循环遍历jQuery对象的每个元素,它对于多元素DOM操作,循环任意数组和对象属性非常有用。
除了这个函数之外,jQuery还提供了一个具有相同名称的辅助函数,可以在不事先选择或创建DOM元素的情况下调用它。
语法
$.each(object,[callback]);
参数
object :需要遍历的对象或数组。
callback:每个成员/元素执行的回调函数,可选参数。格式为function(i,item){},i和item是可选参数,其中i为对象的属性或数组的索引,item为对应属性或索引的值。如果需要退出each循环可使回调函数返回 false,其它返回值将被忽略。
1.获取a元素的href属性
$('a').each(function (index, value){
console.log($(this).attr('href'));
});
2.输出数组对象数据
var numbers = [1, 2, 3, 4, 5, 6];
$.each(numbers , function (index, value){
//index是数组索引
console.log(index + ':' + value);
});
输出结果:0:1, 1:2, 2:3, 3:4, 4:5, 5:6
3.输出Json对象数据
var json = [
{ 'red': '#f00' },
{ 'green': '#0f0' },
{ 'blue': '#00f' }
];
//JS输出:
for (var key in json) {
if (p.hasOwnProperty(key)) {
console.log(key + " -> " + p[key]);
}
}
$.each(json, function () {
$.each(this, function (name, value) {
console.log(name + '=' + value);
});
});
输出结果:red=#f00, green=#0f0, blue=#00f
比较
JQuery还提供了另一个方法$(selector).each(),是对象方法,用途是遍历DOM元素,为每个匹配元素规定运行的函数。