jQuery中$.each()函数的用法

本文介绍jQuery中的$.each()函数用法,包括语法、特点及如何在不同类型的集合中使用,例如数组和对象。此外还展示了如何让IE支持forEach方法,并提供了多个示例帮助理解。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

jQuery中的$.each()函数比foreach更加强大,可以用来遍历JavaScript中的任意集合。

语法:

$.each(collection, callback(indexInArray, valueOfElement));

IE不支持原生 JavaScript 中的 forEach 方法,可以手动把 forEach 方法部署到数组和 NodeList 中:

if ( !Array.prototype.forEach ){
  Array.prototype.forEach = function(fn, scope) {
    for( var i = 0, len = this.length; i < len; ++i) {
      fn.call(scope, this[i], i, this);
    }
  }
}

// 部署完毕后 IE 也可以使用 forEach 了
document.getElementsByTagName('p').forEach(function(e){
    e.className = 'inner';
});

jQuery中的$.each()函数则更加强大。

$.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合,不管是一个JavaScript对象或者是一个数组,如果是一个数组的话,回调函数每次传递一个数组的下标和这个下标所对应的数组的值(这个值也可以在函数体中通过this关键字获取,但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字),这个函数返回所遍历的对象,也就是这个函数的第一个参数,注意这里还是原来的那个数组,这是和map的区别。

其中collection代表目标数组,callback代表回调函数(自己定义),回调函数的参数第一个是数组的下标,第二个是数组的元素。当然我们也可以给回调函数只设定一个参数,这个参数一定是下标,而没有参数也是可以的。

示例一、 传入数组

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.each([1, 2], function(index, value) { 
    alert(index + ':' + value); 
});
</script>

以上代码控制台输出:

0:1
1:2

示例二、 如果一个映射作为集合使用,回调函数每次传入一个键-值对

<script src="http://code.jquery.com/jquery-latest.js">
<script type="text/javascript">
var map = { 
    'a-key':'a-value',
    'b-key':'b-value'
};
$.each(map, function(key, value) { 
    alert(key + ':' + value); 
});
</script>

以上代码控制台输出:

a-key:a-value
b-key:b-value

示例三、 回调函数中 return false时可以退出$.each(), 如果返回一个非false 即会像在for循环中使用continue 一样, 会立即进入下一个遍历

<script src="http://code.jquery.com/jquery-latest.js">
<script type="text/javascript">
//数组 
var arr = [ "1", "2", "3", "4", "5" ];
// 对象
var obj = { one:1, two:2, three:3, four:4, five:5 };  

// this 指定值 
jQuery.each(arr, function() { 
    // this指向为数组的值, 如one, two 
    console.log("value is " + this);
    // 如果this = three 则退出遍历 
    return (this != "3"); 
});

// i 指向键, val指定值 
jQuery.each(obj, function(i, val) { 
    console.log(i + " value is " + val); 
}); 
</script>

以上代码控制台输出:

value is 1
value is 2
value is 3
one value is 1
two value is 2
three value is 3
four value is 4
five value is 5
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值