当前位置: 首页 > 编程笔记 >

jQuery中$.each()函数的用法引申实例

尹辰沛
2023-03-14
本文向大家介绍jQuery中$.each()函数的用法引申实例,包括了jQuery中$.each()函数的用法引申实例的使用技巧和注意事项,需要的朋友参考一下

语法:

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

值得一提的是,forEach 可以很方便的遍历数组和 NodeList ,jQuery 中的 jQuery 对象本身已经部署了这类遍历方法,而在原生 JavaScript 中则可以使用 forEach 方法,但是 IE 并不支持,因此我们可以手动把 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代表回调函数(自己定义),回调函数的参数第一个是数组的下标,第二个是数组的元素。当然我们也可以给回调函数只设定一个参数,这个参数一定是下标,而没有参数也是可以的。

例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 

 类似资料:
  • 本文向大家介绍jQuery $.each遍历对象、数组用法实例,包括了jQuery $.each遍历对象、数组用法实例的使用技巧和注意事项,需要的朋友参考一下 通过它,你可以遍历对象、数组的属性值并进行处理。 使用说明 each函数根据参数的类型实现的效果不完全一致: 1、遍历对象(有附加参数)   2、遍历数组(有附件参数)   3、遍历对象(没有附加参数) 下面提一下jQuery的each方法

  • 我是JSON新手,正在尝试寻找一种查询JSON数据的方法,并将信息导入适当的

  • 本文向大家介绍实例解析jQuery中proxy()函数的用法,包括了实例解析jQuery中proxy()函数的用法的使用技巧和注意事项,需要的朋友参考一下 jQuery.proxy(),接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context )语境。 function将要改变上下文语境的函数。 context函数的上下文语境(`this`)会被设置成这个 objec

  • 本文向大家介绍jQuery中each方法的使用详解,包括了jQuery中each方法的使用详解的使用技巧和注意事项,需要的朋友参考一下 概述:   each() 方法规定为每个匹配元素规定运行的函数。   返回 false 可用于及早停止循环,相当于break。   返回 true 可以结束本次循环,相当于continue。 语法: 1.遍历js数组 2.遍历Object对象 3.遍历JSON对象

  • 我有一个复选框列表,想用复选框的所有名称做一些事情。但是我似乎无法访问HTML对象: 这将产生TypeError:elem.hide不是函数 但是console.log(elem)显示: 如何访问每个元素?

  • 这是我的密码。但在while循环中的函数each()处出错。 从一个数组返回当前键和值对,并前进数组游标each(数组$array):数组未定义函数“each”。intelephense(1010) 请帮帮我.