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 核心参考教程 内置对象
Oct 13 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
JS复杂判断的更优雅写法代码详解
Nov 07 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
php实现mysql数据库备份类
2008/03/20 PHP
php5 pdo新改动加载注意事项
2008/09/11 PHP
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
JS实现简易留言板增删功能
2020/02/08 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
销售辞职报告范文
2014/01/12 职场文书
总经理工作职责范文
2014/03/14 职场文书
工程管理英文求职信
2014/03/18 职场文书
中班开学寄语
2014/04/04 职场文书
环保倡议书50字
2014/05/15 职场文书
2014年质检工作总结
2014/11/26 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
环保宣传语大全
2015/07/13 职场文书
辅导员学期工作总结
2015/08/14 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
python图像处理 PIL Image操作实例
2022/04/09 Python