jQuery数组($.grep,$.each,$.inArray,$.map)处理函数详解
1.jQuery.grep( array, function(elementOfArray, indexInArray) [, invert ] )
描述: 查找满足过滤函数的数组元素。原始数组不受影响。
- array Type: ArrayLikeObject 用于查询元素的类数组对象.
- function Type: Function( Object elementOfArray, Integer indexInArray ) => Boolean该函数来处理每项元素的比对。第一个参数是正在被检查的数组的元素,第二个参数是该元素的索引值。该函数应返回一个布尔值。
this
将是全局的window对象。 - invert Type: Boolean 如果“invert”为false,或没有提供,函数返回一个“callback”中返回true的所有元素组成的数组。如果“invert”为true,函数返回一个“callback”中返回false的所有元素组成的数组。
$.grep()
方法会删除数组必要的元素,以使所有剩余元素通过过滤函数的检查。该测试是一个函数传递一个数组元素和该数组内这个的索引值。只有当测试返回true,该数组元素将返回到结果数组中。
该过滤器的函数将被传递两个参数:当前正在被检查的数组中的元素,及该元素的索引值。该过滤器函数必须返回'true'以包含在结果数组项。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 div { color:blue; }
6 p { color:green; margin:0; }
7 span { color:red; }
8 </style>
9 <script src="http://code.jquery.com/jquery-latest.js"></script>
10 </head>
11 <body>
12 <div></div>
13 <p></p>
14 <span></span>
15
16 <script>
17 var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
18 $("div").text(arr.join(", "));
19
20 arr = jQuery.grep(arr, function(n, i){
21 return (n != 5 && i > 4);
22 });
23 $("p").text(arr.join(", "));
24
25 arr = jQuery.grep(arr, function (a) { return a != 9; });
26 $("span").text(arr.join(", "));
27
28 </script>
29
30 </body>
31 </html>
1 <script type='text/javascript' src="/jquery.js"></script>
2 <script type="text/javascript">
3 $().ready(
4 function(){
5 var array = [1,2,3,4,5,6,7,8,9];
6 var filterarray = $.grep(array,function(value){
7 return value > 5;//筛选出大于5的
8 });
9 for(var i=0;i<filterarray.length;i++){
10 alert(filterarray[i]);
11 }
12 for (key in filterarray){
13 alert(filterarray[key]);
14 }
15 }
16 );
17 </script>
2.jQuery.each( collection, callback(indexInArray, valueOfElement) )
描述: 一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。
jQuery.each(array, callback )
- array 类型: Array 遍历的数组。
- callback 类型: Function( Integer indexInArray, Object value ) 该函数会在每个对象上(迭代)调用。
jQuery.each( object, callback )
- object 类型: Object 遍历的对象。
- callback 类型: Function( String propertyName, Object valueOfProperty ) 该函数会在每个对象上(迭代)调用。
$.each()
函数和$(selector).each()是不一样的,那个是专门用来遍历一个jQuery对象。$.each()
函数可用于迭代任何集合,无论是“名/值”对象(JavaScript对象)或数组。在迭代数组的情况下,回调函数每次传递一个数组索引和相应的数组值作为参数。(该值也可以通过访问this
关键字得到,但是JavaScript将始终将this
值作为一个Object
,即使它是一个简单的字符串或数字值。)该方法返回其第一个参数,这是迭代的对象。
注意: $.each()
函数会在内部检索并且使用传递集合的 length
属性。 所以,如果集合有一个名为length
的属性 - 比如 {bar: 'foo', length: 10}
- 这个函数可能无法正常工作。
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>jQuery.each demo</title>
6 <style>
7 div {
8 color: blue;
9 }
10 div#five {
11 color: red;
12 }
13 </style>
14 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
15 </head>
16 <body>
17
18 <div id="one"></div>
19 <div id="two"></div>
20 <div id="three"></div>
21 <div id="four"></div>
22 <div id="five"></div>
23
24 <script>
25 var arr = [ "one", "two", "three", "four", "five" ];
26 var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };
27
28 jQuery.each( arr, function( i, val ) {
29 $( "#" + val ).text( "Mine is " + val + "." );
30
31 // Will stop running after "three"
32 return ( val !== "three" );
33 });
34
35 jQuery.each( obj, function( i, val ) {
36 $( "#" + i ).append( document.createTextNode( " - " + val ) );
37 });
38 </script>
39
40 </body>
41 </html>
1 <script type='text/javascript' src="/jquery.js"></script>
2 <script type="text/javascript">
3 $().ready(
4 function(){
5 var anObject = {one:1,two:2,three:3};//对json数组each
6 $.each(anObject,function(name,value) {
7 alert(name);
8 alert(value);
9 });
10 var anArray = ['one','two','three'];
11 $.each(anArray,function(n,value){
12 alert(n);
13 alert(value);
14 }
15 );
16 }
17 );
18 </script>
3.jQuery.inArray( value, array [, fromIndex ] )
描述: 在数组中查找指定值并返回它的索引(如果没有找到,则返回-1)。
- value 类型: Anything 要查找的值。
- array 类型: Array 一个数组,通过它来查找。
- fromIndex 类型: Number 数组索引值,表示从哪里在开始查找。默认值是0,这将查找整个数组。
$.inArray()
方法类似于JavaScript的原生.indexOf()
方法,没有找到匹配元素时它返回-1。如果数组第一个元素匹配value
(参数) ,那么$.inArray()
返回0。
因为JavaScript将0视为false(即 0 == false, 但是 0 !== false),要检查在array
中是否存在value
, 你需要检查它是否不等于(或大于)-1。
值之间的比较是严格比较(愚人码头注:即,===或!==比较)。下面这段代码返回 -1
(没有找到) , 因为字符串数组中不可能找到一个数字:
$.inArray( 5 + 5, [ "8", "9", "10", 10 + "" ] );
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 div { color:blue; }
6 span { color:red; }
7 </style>
8 <script src="http://code.jquery.com/jquery-latest.js"></script>
9 </head>
10 <body>
11
12 <div>"John" found at <span></span></div>
13 <div>4 found at <span></span></div>
14 <div>"Karl" not found, so <span></span></div>
15 <div>"Pete" is in the array, but not at or after index 2, so <span></span></div>
16 <script>var arr = [ 4, "Pete", 8, "John" ];
17 var $spans = $("span");
18 $spans.eq(0).text(jQuery.inArray("John", arr));
19 $spans.eq(1).text(jQuery.inArray(4, arr));
20 $spans.eq(2).text(jQuery.inArray("Karl", arr));
21 $spans.eq(3).text(jQuery.inArray("Pete", arr, 2));
22 </script>
23
24 </body>
25 </html>
1 <script type='text/javascript' src="/jquery.js"></script>
2 <script type="text/javascript">
3 $().ready(
4 function(){
5 var anArray = ['one','two','three'];
6 var index = $.inArray('two',anArray);
7 alert(index);//返回该值在数组中的键值,返回1
8 alert(anArray[index]);//value is two
9 }
10 );
11 </script>
4.jQuery.map( array, callback(elementOfArray, indexInArray) )
jQuery.map( array, callback(elementOfArray, indexInArray) )
- array类型: Array待转换数组。
- callback(elementOfArray, indexInArray)类型: Function()处理每一个元素的函数。第一个参数是数组元素,第二个参数是该元素的索引值。该函数可以返回任何值。在函数内部,
this
将是全局的window对象。
jQuery.map( arrayOrObject, callback( value, indexOrKey ) )
- arrayOrObject 类型: Array,Object 待转换数组或对象。
- callback( value, indexOrKey ) 类型: Function() 处理每一个元素的函数。第一个参数是数组中元素或对象的值,第二个参数是该元素在数组中的索引值或该对象的键。该函数可以返回任何值,该返回值会被添加到数组中。若返回是数组,则会将该数组中的元素添加到最终的结果数组中。在函数内部,
this
指的是全球(window)的对象。 如果你希望处理一个jQuery对象——例如,
$('div').map( callback );
— 使用 .map() 代替.$.map()
方法会在数组的每一个元素或对象上应用一个函数并将结果映射到一个新的数组中。在jQuery 1.6之前,,$.map()
只支持遍历数组和类似数组的对象 。在jQuery 1.6也支持遍历对象。类数组(Array-like)对象——也就是那些含有
.length
属性 以及 在索引值为.length - 1
的位置有值的对象,必须将其转化成真正的数组之后才能传递给$.map()
方法使用。jQuery 库提供了 $.makeArray() 方法来完成这样的转换。1 // The following object masquerades as an array.
2 var fakeArray = {"length": 1, 0: "Addy", 1: "Subtracty"};
3
4 // Therefore, convert it to a real array
5 var realArray = $.makeArray( fakeArray )
6
7 // Now it can be used reliably with $.map()
8 $.map( realArray, function(val, i) {
9 // do something
10 });在该方法中提供的转换函数会应用在数组或对象的顶级(top-level)元素上,并且该转换函数中有两个参数:元素在数组或对象中的值及该值所对应的索引值或键。
该函数可以返回:
- 转换后的值,该值会被映射到最终的结果数组中
null
或者undefined
, 用于移除该元素- 数组,会将该数组中的元素添加到最终的结果数组中
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 div { color:blue; }
6 p { color:green; margin:0; }
7 span { color:red; }
8 </style>
9 <script src="http://code.jquery.com/jquery-latest.js"></script>
10 </head>
11 <body>
12 <div></div>
13 <p></p>
14 <span></span>
15
16 <script>
17 var arr = [ "a", "b", "c", "d", "e" ];
18 $("div").text(arr.join(", "));
19
20 arr = jQuery.map(arr, function(n, i){
21 return (n.toUpperCase() + i);
22 });
23 $("p").text(arr.join(", "));
24
25 arr = jQuery.map(arr, function (a) {
26 return a + a;
27 });
28 $("span").text(arr.join(", "));
29
30 </script>
31
32 </body>
33 </html>1 <script type='text/javascript' src="/jquery.js"></script>
2 <script type="text/javascript">
3 $().ready(
4 function(){
5 var strings = ['0','1','2','3','4','S','6'];
6 var values = $.map(strings,function(value){
7 var result = new Number(value);
8 return isNaN(result) ? null:result;//isNaN:is Not a Number的缩写
9 }
10 );
11 for (key in values) {
12 alert(values[key]);
13 }
14 }
15 );
16 </script>
jQuery数组($.grep,$.each,$.inArray,$.map)处理函数详解的更多相关文章
- jQuery.attr() 函数详解
一,jQuery.attr() 函数详解: http://www.365mini.com/page/jquery-attr.htm 二,jQuery函数attr()和prop()的区别: http: ...
- jQuery.ready() 函数详解
jQuery.ready() 函数详解 ready()函数用于在当前文档结构载入完毕后立即执行指定的函数. 该函数的作用相当于window.onload事件. 你可以多次调用该函数,从而绑定多个函数, ...
- jquery inArray()函数详解
jquery inarray()函数详解 jquery.inarray(value,array)确定第一个参数在数组中的位置(如果没有找到则返回 -1 ). determine the index o ...
- Jquery之each函数详解
最近项目被each函数坑惨了,想来还是好好整理下关于each函数的方方面面,一来方便自己查阅,二来为读者提供经验和教训,废话不多说,来看看Each函数到底是怎么坑人的. 一. 全局jQuery.eac ...
- 【转载】jQuery.extend 函数详解
转载自:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html jQuery.extend 函数详解 JQuery的e ...
- jQuery.hasClass() 函数详解
jQuery.hasClass() 函数详解 hasClass()函数用于指示当前jQuery对象所匹配的元素是否含有指定的css类名. 该函数属于jQuery对象(实例). 语法 JavaScrip ...
- STL之map与pair与unordered_map常用函数详解
STL之map与pair与unordered_map常用函数详解 一.map的概述 map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称 ...
- js数组中foEach和map的用法详解 jq中的$.each和$.map
数组中foEach和map的用法详解 相同点: 1.都是循环遍历数组(仅仅是数组)中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value, ...
- Python内置函数详解
置顶 内置函数详解 https://docs.python.org/3/library/functions.html?highlight=built#ascii https://docs.pyth ...
随机推荐
- WNN48T6X 54端口国产化万兆交换机
WNN48T6X是基于盛科CTC5160设计的国产化三层万兆交换机,提供48路千兆电口和6路万兆光口,采用龙芯 2K1000处理器,支持双冗余可插拔电源供电.支持常规的L2/L3协议,支持Telnet ...
- C# 基础 - Enum 的一些操作
1. int 转换成 enum public enum Suit { Spades, Hearts, Clubs, Diamonds } Suit spades = (Suit)0; Suit hea ...
- react+ts封装AntdUI的日期选择框之月份选择器DatePicker.month
需求:由于在项目开发中,当需要使用该组件时都需要对该组件进行大量的代码输出,为了方便代码统一管理,减少冗余代码,所以将此组件进行二次封装. 其他成员在使用中只需将自己的设置通过对应的参数传递到该组件, ...
- 记一次 mysql主从复制安装配置 过程
mysql主从复制安装配置 1.centos安装及准备 去centos官网下载相应source版本的镜像文件并在vmware中安装,安装中会遇到填写installation source,输入以下即可 ...
- java注解基础入门
前言 这篇博客主要是对java注解相关的知识进行入门级的讲解,包括**,核心内容主要体现在对java注解的理解以及如何使用.希望通过写这篇博客的过程中让自己对java注解有更深入的理解,在工作中可以巧 ...
- 在ASP.NET Core中用HttpClient(三)——发送HTTP PATCH请求
在前面的两篇文章中,我们讨论了很多关于使用HttpClient进行CRUD操作的基础知识.如果你已经读过它们,你就知道如何使用HttpClient从API中获取数据,并使用HttpClient发送PO ...
- 2018ICPC南京 A. Adrien and Austin
题目: 题意:1-N个石子每次只能取连续的1-K个问输赢.(一开始以为只是个简简单单的巴什游戏,激动的提交了一发wr了,再读了一遍题才发现是只能取连续的) 题解:当n==0或者k==1&&am ...
- 亲自动手实现Python+pygame中国象棋游戏
功能1:实现游戏整体界面显示 一.创建基本的结构 代码如下: import time import pygame def main(): # 初始化pygame pygame.init() # 创建用 ...
- [LeetCode]2. 两数相加(难度:中等)
题目: 给你两个非空的链表,表示两个非负的整数.它们每位数字都是按照逆序的方式存储的,并且每个节点只能存储一位数字.请你将两个数相加,并以相同形式返回一个表示和的链表.你可以假设除了数字0之外,这两个 ...
- ( ) 与 { } 差在哪?-- Shell十三问<第七问>
( ) 与 { } 差在哪?-- Shell十三问<第七问> 先说一下,为何要用 ( ) 或 { } 好了. 许多时候,我们在 shell 操作上,需要在一定条件下一次执行多个命令,也就是 ...