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 闭包基础分享
Jul 10 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
node.js入门学习之url模块
Feb 25 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
js实现二级联动简单实例
Jan 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
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP 实例化类的一点摘记
2008/03/23 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python读写Redis数据库操作示例
2014/03/18 Python
Python 列表理解及使用方法
2017/10/27 Python
python读取和保存视频文件
2018/04/16 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
Keras 使用 Lambda层详解
2020/06/10 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
同事吵架检讨书
2014/02/05 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
什么是就业协议书
2014/04/17 职场文书
免职证明样本
2014/10/23 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
浅析Python中的套接字编程
2021/06/22 Python