提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解

jQuery遍历方法Map对象数组JSONJSON
2023-09-27 14:29:05 时间

1、jquery grep()筛选遍历数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$().ready(
    function (){
        var  array = [1,2,3,4,5,6,7,8,9];
        var  filterarray = $.grep(array, function (value){
            return  value > 5; //筛选出大于5的
        });
        for ( var  i=0;i<filterarray.length;i++){
            alert(filterarray[i]);
        }
        for  (key  in  filterarray){
            alert(filterarray[key]);
        }
    }
);

 
2、jquery each()筛选遍历数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$().ready(
    function (){
        var  anObject = {one:1,two:2,three:3}; //对json数组each
        $.each(anObject, function (name,value) {
            alert(name);
            alert(value);
        });
        var  anArray = [ 'one' , 'two' , 'three' ];
        $.each(anArray, function (n,value){
            alert(n);
            alert(value);
        }
        );
    }
);

 


3、jquery inArray()筛选遍历数组

1
2
3
4
5
6
7
8
$().ready(
    function (){
        var  anArray = [ 'one' , 'two' , 'three' ];
        var  index = $.inArray(‘two’,anArray);
        alert(index); //返回该值在数组中的键值，返回1
        alert(anArray[index]); //value is two
    }
);

 
4、jquery map()筛选遍历数组

1
2
3
4
5
6
7
8
9
10
11
12
13
$().ready(
    function (){
        var  strings = [ '0' , '1' , '2' , '3' , '4' , 'S' , '6' ];
        var  values = $.map(strings, function (value){
                var  result =  new  Number(value);
                return  isNaN(result) ?  null :result; //isNaN:is Not a Number的缩写
            }
        );
        for  (key  in  values) {
            alert(values[key]);
        }
    }
);

 
二、遍历解析json对象

1
2
3
4
5
6
var  json = [{dd: 'SB' ,AA: '东东' ,re1:123},{cccc: 'dd' ,lk: '1qw' }];
for ( var  i=0,l=json.length;i<l;i++){
    for ( var  key  in  json[i]){
        alert(key+’:'+json[i][key]);
    }
}

 
2、jquery遍历解析json对象2
有如下 json对象：
var obj ={”name”:”冯娟”,”password”:”123456″,”department”:”技术部”,”sex”:” 女”,”old”:30};
遍历方法：

1
2
3
4
5
for ( var  p  in  obj){
    str = str+obj[p]+’,’;
    return  str;
 
}

 
三、Map()方法详解
1、实例

构建表单中所有值的列表：

1
2
3
4
5
$( "p" ).append( $( "input" ).map( function (){
 
   return  $( this ).val();
 
}).get().join( ", " ) );

 
2、定义和用法

map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。

3语法

.map(callback(index,domElement))

参数
    

描述

callback(index,domElement)
    

对当前集合中的每个元素调用的函数对象。

详细说明

由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。

.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form method= "post"  action= "" >
 
  <fieldset>
     <div>
       <label  for = "two" >2</label>
       <input type= "checkbox"  value= "2"  id= "two"  name= "number[]" >
     </div>
     <div>
       <label  for = "four" >4</label>
       <input type= "checkbox"  value= "4"  id= "four"  name= "number[]" >
     </div>
     <div>
       <label  for = "six" >6</label>
       <input type= "checkbox"  value= "6"  id= "six"  name= "number[]" >
     </div>
     <div>
       <label  for = "eight" >8</label>
       <input type= "checkbox"  value= "8"  id= "eight"  name= "number[]" >
     </div>
  </fieldset>
 
</form>

 
我们能够获得复选框 ID 组成的逗号分隔的列表：

1
2
3
4
5
$( ':checkbox' ).map( function () {
 
   return  this .id;
 
}).get().join( ',' );

 
本次调用的结果是字符串："two,four,six,eight"。
在 callback 函数内部，this 引用每次迭代的当前 DOM 元素。该函数可返回单独的数据项，或者是要被插入结果集中的数据项的数组。如果返回的是数组，数组内的元素会被插入集合中。如果函数返回 null 或 undefined，则不会插入任何元素。

相关文章