常见jquery遍历数组的方法_jquery中each遍历对象与数组

发布时间:2020-03-29编辑:脚本学堂
本文介绍了jquery遍历数组的方法,jquery数组遍历的技巧,jquery each遍历对象与数组的方法示例,jquery遍历数组与筛选数组的方法等,供大家学习参考。

一、jquery遍历数组的方法

例子:
 

复制代码 代码示例:
var members=["1","2","3"];
//index为数组的下标
//value为数组下标对应的值
$.each(members,function(index,value){
  alert(value);
});

二、jquery each遍历对象与数组

jquery中each可用于遍历对象和数组,如需退出each循环可使回调函数返回false,下面有个示例,大家可以看看

通用遍历方法,可用于遍历对象和数组。$().each(),回调函数拥有两个参数:
第一个为对象的成员或数组的索引,第二个为对应变量或内容。如需退出each循环可使回调函数返回false

有如下二个select下拉框:
 

复制代码 代码示例:
计划类别:
<select id="PLANTYPE">
<option value="0">-所有-</option>
<option value="1">新建</option>
<option value="2">续建</option>
</select>
申报类型:
<select id="AUDITTYPE">
<option value="0">-所有-</option>
<option value="1">申报</option>
<option value="2">修改</option>
</select>
 

使用each方法获取option中的文本值,即 -所有-、新建、续建...
如果只使用一次each循环 可从option处开始
 

复制代码 代码示例:
$("option").each(function(index,data){
console.info($( data ).text());
//或者console.info($(this).text());
})

也可从select处开始:
 

复制代码 代码示例:
$("select").each(function( index,data){
$("option", data).each(function(m,n){
console.info($(this).text());
})
})
 

$("option", data)一定要加上 data或者$("option",this),表示此对象下的option
否则就是所有的option。

each还有一种用法jQuery.each(object, [callback])
不同于jQuery对象的$().each()方法,此方法可用于例遍任何对象。
用此方法同样遍历上述代码
 

复制代码 代码示例:
$.each($("option"),function(index,data){
console.info(index+" "+data);
})

也可以遍历数组
 

复制代码 代码示例:
$.each( [0,1,2], function(i, n){
console.info( "Index:" + i + ": " + n );
});

遍历对象:
 

复制代码 代码示例:
$.each({ name: "itmyhome", addr: "Beijing" },function(i, n){
console.info("Name: " + i + ", Value: " + n);
});

三、jquery遍历数组与筛选数组的方法

在jquery是遍历筛选数组有多种方法与函数了,包括有:grep、each、inArray、map同时也要以遍历json对象哦,下面给各位同学介绍一下具体的操作方法

grep
grep()方法用于数组元素过滤筛选
grep(array,callback,invert)
array:待过滤数组;
callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第一个是当前数组元素的值,一个是当前数组元素的下标,即元素索引值。此函数应返回一个布尔值。另外,此函数可设置为一个字符串,当设置为字符串时,将视为“lambda-form”(缩写形式?),其中 a 代表数组元素,i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”
invert:布尔型可选项,默认值false,值为true或false, 如果 “invert” 为 false 或为设置,则函数返回数组中由过滤函数返回 true 的元素,当”invert” 为 true,则返回过滤函数中返回 false 的元素集。

例子:
 

复制代码 代码示例:
<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().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]);
}
}
);
</script>

1、each方法遍历数组
在jquery里有一个each方法,用起来非常的爽,不用再像原来那样写for循环,jquery源码里自己也有很多用到each方法。
其实jquery中的each方法是通过js里的call方法来实现的。

例子:
 

复制代码 代码示例:
<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().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);
}
);
}
);
</script>

2、inArray方法遍历数组
jQuery.isArray(obj) 是 jQuery 1.3 新增。测试对象是否为数组。  返回值:Boolean
参数 : objObject用于测试是否为数组的对象
示例 :检测是否为数组

例子:
 

复制代码 代码示例:
<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var anArray = ['one','two','three'];
var index = $.inArray('two',anArray);
alert(index);//返回该值在数组中的键值,返回1
alert(anArray[index]);//value is two
}
);
</script>

3、map方法遍历数组
map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。
由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组。
.map() 方法对于获得或设置元素集的值特别有用。

例子,带有一系列复选框表单
 

复制代码 代码示例:
<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().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]);
}
}
);
</script>

4、遍历json对象:
 

复制代码 代码示例:
<script>
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]);
}
}
</script>

遍历json对象
json对象:
 

var obj ={”name”:”冯娟”,”password”:”123456″,”department”:”技术部”,”sex”:” 女”,”old”:30};

遍历方法:
 

复制代码 代码示例:
for(var p in obj){
str = str+obj[p]+',';
return str;
}