[jquery遍历数组]jQuery数组处理方法总结

更新时间:2017-12-25    来源:jquery    手机版     字体:

【www.bbyears.com--jquery】

each是用来遍历数组

each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象、数组的属性值并进行处理。jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用。

实例

 代码如下

$.each(array, [callback])遍历,很常用
var arr = ["javascript", "php", "java", "c++", "c#", "perl", "vb", "html", "css", "objective-c"];
$.each(arr, function(key, val) {
    // firebug console
    console.log("index in arr:" + key + ", corresponding value:" + val);
    // 如果想退出循环
    // return false;
});

$.grep(array, callback, [invert])过滤,常用

解释: 使用过滤函数过滤数组元素.此函数至少传递两个参数(第三个参数为true或false,对过滤函数返回值取反,个人觉得用处不大): 待过滤数组和过滤函数. 过滤函数必须返回 true 以保留元素或 false 以删除元素. 另外,过滤函数还可以是可设置为一个字条串(个人不推荐,欲了解自行查阅);

 代码如下


var temp = [];
temp = $.grep(arr, function(val, key) {
    if(val.indexOf("c") != -1)
        return true;
    // 如果[invert]参数不给或为false, $.grep只收集回调函数返回true的数组元素
    // 反之[invert]参数为true, $.grep收集回调函数返回false的数组元素
}, false);
console.dir(temp);


$.map(array, [callback])

Jquery中的Map函数帮助我们对一个数组或者数据集进行映射。map与filter和grep的区别在于filter和grep会通过过滤改变元素集或数组的个数,而map不会改变元素集或数组的个数,只会改变其中的内容。

数据集使用map:从li元素集中进行映射并修改其具体文本,然后添加到Id为div2的元素中

数组使用map:从数组Items中进行映射并修改其具体文本,然后添加到Id为div2的元素中

 代码如下

//1.6之前的版本只支持数组
temp = $.map(arr, function(val, key) {
    //返回null,返回的数组长度减1
    if(val === "vb") return null;
    return val;
});
console.dir(temp);
//1.6开始支持json格式的object
var obj = {key1: "val1", key2: "val2", key3: "val3"};
temp = $.map(obj, function(val, key) {
    return val;
});
console.dir(temp);


$.inArray(val, array)判断是否在指定数组中,常用

inArray()方法是类似JavaScript的原生indexOf()方法,用于在数组中匹配一个数。返回-1代表,没有找到一个匹配。
如果在数组第一个元素的匹配值,$。inArray()返回0,数组值的下标。

如果我们检查值在数组内存在,我们需要检查,如果它不等于(或大于)-1。

示例:

 代码如下

var m_31 = [1,3,5,7,8,10,12];
var m_30 = [4,6,9,11];
console.log(jQuery.inArray(3, m_31));
//返回值为1

$.unique(array)过滤数组中的重复元素,不常用


blahblahblah....
// $.unique只支持DOM元素数组,去除重复DOM元素,不支持其他类型数组(String或者Number)
// 获得原始的DOM数组,而不是jQuery封装的
var divs = $("div").get();
// 增加几个class为dup的div
divs = divs.concat($("div.dup").get());
console.log("before unique:" + divs.length);
divs = $.unique(divs);
console.log("after unique:" + divs.length);


$.makeArray(obj)将类数组对象转成数组,不常用

一般来说,无论是在jQuery和JavaScript中很多方法都返回类似数组的对象。举例来说,jQuery的代理函数$()返回一个jQuery对象具有许多的数组的属性。(length, []数组访问运算符等),但和数组并不完全一样,缺少一些对数组的内置方法(如.pop()和.reverse())。

 代码如下




 
  <script src="jquery-latest.js"></script>


  First
  Second
  Third
  Fourth
<script>
    var elems = document.getElementsByTagName("div"); // returns a nodeList
    var arr = jQuery.makeArray(elems);
    arr.reverse(); // use an Array method on list of dom elements
    $(arr).appendTo(document.body);
</script>


1
var obj = $("li");

var arr = $.makeArray(obj);


Result:

(typeof obj === "object" && obj.jquery) === true;
jQuery.isArray(arr) === true;

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