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基础上的超强GridView展示
Sep 18 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 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迭代器的内部执行过程详解
2013/11/12 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
Python sys.argv用法实例
2015/05/28 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
【python】matplotlib动态显示详解
2019/04/11 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
大数据分析用java还是Python
2020/07/06 Python
Numpy数组的广播机制的实现
2020/11/03 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
便利店的创业计划书
2014/01/15 职场文书
信用卡工作证明模板
2014/09/14 职场文书
无房证明范本
2014/09/17 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
小学教育见习报告
2014/10/31 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
windows系统搭建WEB服务器详细教程
2022/08/05 Servers