jQuery grep()方法详解及实例代码


Posted in Javascript onOctober 30, 2016

什么是jQuery.grep()?

jQuery.grep()是一个查找满足过滤函数的数组元素的函数。原始数组不受影响,返回值为数组。

用法介绍:

写法:

jQuery.grep( array, function(elementOfArray, indexInArray) [, invert ] )

参数介绍:

array

类型: Array
用于查询元素的数组。

function(elementOfArray, indexInArray)

类型: Function()

该函数来处理每项元素的比对。第一个参数是正在被检查的数组的元素,第二个参数是该元素的索引值。该函数应返回一个布尔值。this将是全局的window对象。

elementOfArray--数组元素

indexInArray--元素索引值

invert

类型: Boolean

如果“invert”为false,或没有提供,函数返回一个“callback”中返回true的所有元素组成的数组,。如果“invert”为true,函数返回一个“callback”中返回false的所有元素组成的数组。   

举例:过滤出原始数组中值不为 5,并且索引值大于 4 的元素。然后再过滤掉所有值为 9 的元素

<!DOCTYPE html>
<html>
<head>
 <style>
 div { color:blue; }
 p { color:green; margin:0; }
 span { color:red; }
 </style>
 <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
 <div></div>
 <p></p>
 <span></span>
<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>
 
</body>
</html>

则结果为:

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的 支持!

Javascript 相关文章推荐
jQuery的slideToggle方法实例
May 07 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
vuex实现购物车功能
Jun 28 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
webix+springmvc session超时跳转登录页面
Oct 30 #Javascript
js获取时间函数及扩展函数的方法
Oct 30 #Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 #Javascript
浅谈JS函数定义方式的区别
Oct 30 #Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 #Javascript
原生js代码实现图片放大境效果
Oct 30 #Javascript
Angular2 多级注入器详解及实例
Oct 30 #Javascript
You might like
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
document.write的几点使用心得
2014/05/14 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
解析Python编程中的包结构
2015/10/25 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Django组件content-type使用方法详解
2019/07/19 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
Python如何实现远程方法调用
2020/08/07 Python
python打包多类型文件的操作方法
2020/09/21 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
金士达面试非笔试
2012/03/14 面试题
会展中心部门工作职责
2013/11/27 职场文书
法制宣传标语
2014/06/23 职场文书
出差报告范文
2014/11/06 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
论文答谢词
2015/01/20 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
禁毒心得体会范文
2016/01/15 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript