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数组的扩展实现代码集合
Jun 01 Javascript
Prototype Class对象学习
Jul 19 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
jquery图片切换插件
Mar 16 Javascript
初识Javascript小结
Jul 16 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
Python heapq使用详解及实例代码
2017/01/25 Python
Python中logging实例讲解
2019/01/17 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
Python中包的用法及安装
2020/02/11 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
大四学生个人总结
2015/02/15 职场文书
无故旷工检讨书
2015/08/15 职场文书
市级三好生竞选稿
2015/11/21 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python