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中ajax学习笔记3
Oct 16 Javascript
javascript的数组和常用函数详解
May 09 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
vscode自定义vue模板的实现
Jan 27 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连接access数据库
2008/03/27 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
php自定义hash函数实例
2015/05/05 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
JavaScript内核之基本概念
2011/10/21 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
基python实现多线程网页爬虫
2015/09/06 Python
详解Python进程间通信之命名管道
2017/08/28 Python
Python实现的端口扫描功能示例
2018/04/08 Python
python中的for循环
2018/09/28 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
解决django FileFIELD的编码问题
2020/03/30 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
职业技术学校毕业生推荐信
2013/12/03 职场文书
工作表扬信的范文
2014/01/10 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
师范生小学见习总结
2015/06/23 职场文书
环境卫生整治简报
2015/07/20 职场文书