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 相关文章推荐
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 Javascript
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
一次编写,随处运行
2006/10/09 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
php中smarty区域循环的方法
2015/06/11 PHP
php阳历转农历优化版
2016/08/08 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
javascript下function声明一些小结
2007/12/28 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
Django单元测试工具test client使用详解
2019/08/02 Python
同程旅游英文网站:LY.com
2018/11/13 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
后备干部考察材料
2014/02/12 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
给校长的建议书100字
2014/05/16 职场文书
代领报检证委托书范本
2014/10/11 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
TS 类型收窄教程示例详解
2022/09/23 Javascript