JQUERY中GREP用法示例详解

看看jquery的grep的用法代码示例:

<script>
var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
$( "div" ).text( arr.join( ", " ) );
 
arr = jQuery.grep(arr, function( n, i ) {
  return ( n !== 5 && i > 4 );
});
$( "p" ).text( arr.join( ", " ) );
 
arr = jQuery.grep(arr, function( a ) {
  return a !== 9;
});
 
$( "span" ).text( arr.join( ", " ) );
</script>

jQuery的grep函数的作用是“筛选”,遍历数组,返回符合筛选条件的元素,grep函数第一个参数是数组,第二个是function函数,function( n, i ),n表示遍历的元素值,i是索引。

此段jquery代码实现的效果是:

1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1
1, 9, 4, 7, 3, 8, 6, 9, 1
1, 4, 7, 3, 8, 6, 1

关于jQuery grep函数用法还有一个地方要知道:

$.grep( [ 0, 1, 2 ], function( n, i ) {
    return n > 0;
}, true );

如果第三个参数为true,那么就是“反着来”,比如上例,返回的是小于等于0的元素。

补充:

var nums = '1,2,3,4,5,jQuery,CSS,5'.split(',');
可见数组中有数字和字符串,如果我们想找出其中的字符串,我们可以直接使用 $.grep() 方法来完成这个任务,如下:

nums = $.grep(nums, function (num, index) {
    // num = 数组元素的当前值 
    // index = 当前值的下标
    return isNaN(num);
});
console.log(nums); //结果为: ["jQuery", "CSS"] 

我们很容易想到 $.map() 方法,$.map() 方法可将一个数组转换为另一个数组,所以,使用 $.map() 方法也可以完成这个任务,如下:

nums = $.map(nums, function (num, index) {
    //和$.grep() 的区别
    //return isNaN,得到结果为:[true, true]
    return isNaN(num) ? num : null;
});

console.log(nums); // ["jQuery", "CSS"]

时间: 2024-09-14 01:31:26

JQUERY中GREP用法示例详解的相关文章

jquery中cookie用法实例详解(获取,存储,删除等)_jquery

本文实例讲述了jquery中cookie用法.分享给大家供大家参考,具体如下: cookie在jquery中有指定的cookie操作类,下面我先来介绍我们在使用cookie操作类时的一些问题,然后介绍正确的使用方法. 使用JQuery操作cookie时 发生取的值不正确的问题: 结果发现cookie有四个不同的属性: 名称,内容,域,路径 $.cookie('the_cookie'); // 读取 cookie $.cookie('the_cookie', 'the_value'); // 存储

Jquery中$.ajax()方法参数详解_AJAX相关

俗说好记性不如个烂笔头,下面是jquery中的ajax方法参数详解,这里整理了一些供大家参考.  1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. 4.async

Java中的instanceof关键字在Android中的用法实例详解_java

在下面介绍Android中如何使用instanceof关键字开发更方便时,先来温习一下java中instanceof的概念. instanceof大部分的概念是这样定义的:instanceof是Java的一个二元操作符,和==,>,<是同一类东西.由于它是由字母组成的,所以也是Java的保留关键字.它的作用是测试它左边的对象是否是它右边的类的实例,返回boolean类型的数据.举个栗子: String s = "I AM an Object!"; boolean isObj

jQuery中的select操作详解_jquery

下面给大介绍了jquery对select的操作介绍,非常不错,具有内容介绍如下所示: select的html标签如下: <select class="xxx" id="yyy"><option></option>...<option></option></select> 1.设置value为"lll"的option选中 $('#yyy').val("lll"

Jquery中$.ajax()方法参数详解

俗说好记性不如个烂笔头,下面是jquery中的ajax方法参数详解,这里整理了一些供大家参考. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. 4.async:

js中this用法实例详解_javascript技巧

本文实例讲述了js中this用法.分享给大家供大家参考.具体如下: 1. 指向window 全局变量 alert(this) //返回 [object Window] 全局函数 function sayHello(){ alert(this); } sayHello(); 2. 指向该对象(在全局里面this指向window,在某个对象里面this指向该对象,在闭包里面this指向window) var user="the Window"; var box={ user:'the bo

jQuery中ScrollTo用法示例_jquery

本文实例讲述了jQuery中ScrollTo用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

jQuery源码分析之jQuery中的循环技巧详解_jquery

jQuery的源码中有很多值得学习借鉴的技巧,本文即收集了jQuery中出现的各种遍历技巧和场景.具体分析如下: // 简单的for-in(事件) for ( type in events ) { } // 缓存length属性,避免每次都去查找length属性,稍微提升遍历速度 // 但是如果遍历HTMLCollection时,性能提升非常明显,因为每次访问HTMLCollection的属性,HTMLCollection都会内部匹配一次所有的节点 for ( var j = 0, l = ha

关于Function中的bind()示例详解_javascript技巧

前言 bind()接受无数个参数,第一个参数是它生成的新函数的this指向,比如我传个window,不管它在何处调用,这个新函数中的this就指向window,这个新函数的参数就是bind()的第二个.第三个.第四个....第n个参数加上它原本的参数.(行吧,我自己都蒙圈了) 示例介绍 我们还是看看栗子比较好理解,举个bind()最基本的使用方法: this.x = 9; var module = { x: 81, getX: function() { return this.x; } }; m