夏日博客

A-A+

JQUERY中GREP用法示例详解

2016年01月10日 前端设计 暂无评论 阅读 5 views 次

GREP方法其实就一个数组筛选的功能了，我们可以利用它来快速过滤不要的数据或获取需要的数组了，具体关于jquery筛选GREP用法如下。

看看jquery的grep的用法代码示例：

  1. <script>  
  2. var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];  
  3. $( "div" ).text( arr.join( ", " ) );  
  4.    
  5. arr = jQuery.grep(arr, function( n, i ) {  
  6.   return ( n !== 5 && i > 4 );  
  7. });  
  8. $( "p" ).text( arr.join( ", " ) );  
  9.    
  10. arr = jQuery.grep(arr, function( a ) {  
  11.   return a !== 9;  
  12. });  
  13.    
  14. $( "span" ).text( arr.join( ", " ) );  
  15. </script>  

jQuery的grep函数的作用是“筛选”，遍历数组，返回符合筛选条件的元素，grep函数第一个参数是数组，第二个是function函数，function( n, i )，n表示遍历的元素值，i是索引。

此段jquery代码实现的效果是：

  1. 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1  
  2. 1, 9, 4, 7, 3, 8, 6, 9, 1  
  3. 1, 4, 7, 3, 8, 6, 1  

关于jQuery grep函数用法还有一个地方要知道：

  1. $.grep( [ 0, 1, 2 ], function( n, i ) {  
  2.     return n > 0;  
  3. }, true );  

如果第三个参数为true，那么就是“反着来”，比如上例，返回的是小于等于0的元素。

补充:

var nums = '1,2,3,4,5,jQuery,CSS,5'.split(',');

可见数组中有数字和字符串，如果我们想找出其中的字符串，我们可以直接使用 $.grep() 方法来完成这个任务，如下：

  1. nums = $.grep(nums, function (num, index) {  
  2.     // num = 数组元素的当前值    
  3.     // index = 当前值的下标  
  4.     return isNaN(num);  
  5. });  
  6. console.log(nums); //结果为： ["jQuery", "CSS"]   

我们很容易想到 $.map() 方法,$.map() 方法可将一个数组转换为另一个数组,所以,使用 $.map() 方法也可以完成这个任务,如下:

  1. nums = $.map(nums, function (num, index) {  
  2.     //和$.grep() 的区别  
  3.     //return isNaN,得到结果为：[true, true]  
  4.     return isNaN(num) ? num : null;  
  5. });  
  6. console.log(nums); // ["jQuery", "CSS"]  
标签：

给我留言