【jquery选择器】JQUERY中GREP用法示例详解

更新时间:2019-10-20    来源:jquery    手机版     字体:

【www.bbyears.com--jquery】


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

<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>

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

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


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

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


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

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

补充:

var nums = "1,2,3,4,5,jQuery,CSS,5".split(",");
可见数组中有数字和字符串,如果我们想找出其中的字符串,我们可以直接使用 $.grep() 方法来完成这个任务,如下:

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

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

nums = $.map(nums, function (num, index) {
    //和$.grep() 的区别
    //return isNaN,得到结果为:[true, true]
    return isNaN(num) ? num : null;
});

console.log(nums); // ["jQuery", "CSS"]

本文来源:http://www.bbyears.com/wangyezhizuo/74405.html

热门标签

更多>>

本类排行