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 相关文章推荐
js对象数组按属性快速排序
Jan 31 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 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
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
在Python中使用正则表达式的方法
2015/08/13 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
python线程的几种创建方式详解
2019/08/29 Python
python定时任务 sched模块用法实例
2019/11/04 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
长辈证婚人证婚词
2014/01/09 职场文书
领导调研接待方案
2014/02/27 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
2014年财政所工作总结
2014/11/22 职场文书
放飞理想主题班会
2015/08/14 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
Pytest之测试命名规则的使用
2021/04/16 Python
PHP实现考试倒计时功能代码
2021/04/16 PHP