js jquery 遍历 for,while,each,map,grep

js jquery 遍历

一,for循环.

// 第一种
var arr = [1, 2, 3];
for(var i = 0; i < arr.length; i++) {
　　console.log(arr[i]);
}

// 第二种
var arr = [1, 2, 3];
for(var i in arr) {
    console.log(arr[i]);
}

 

二,while循环

var arr = [1, 2, 3];
var i = arr.length;
while(i--) {
　　console.log(arr[i]);
}

 

三,jquery

// $.each()用于遍历数组元素或对象属性
var array = [ 12, "jQuery", true ];
$.each( array, function(i, value){
    // i 表示当前迭代元素的索引或对象的属性名称
    // value 表示当前迭代的数组元素或对象的属性值
    // this 与  value 相同
    alert( i + " = " + value );

    // 如果函数return false，将终止遍历
});

// $.map()用于遍历数组元素或对象属性，并将每次执行遍历函数的返回值封装为数组返回
var obj = { name: "jQuery", age: 20, isAdmin: true };
var resultArray = $.map( obj, function(value, i){ // 注意参数顺序与each()不同
    // value 表示当前迭代的数组元素或对象的属性值
    // i 表示当前迭代元素的索引或对象的属性名称
    // this 指向全局对象(window)

    if( typeof value === "number"){
        return null; // 如果函数返回null或undefined，则不会添加到结果数组中
    }else{
        return value;
    }
} );
// resultArray 为 [ "jQuery", true ]

//$.grep()用于遍历数组元素，并根据函数的返回值(true/false)来过滤数组元素
var array2 = [ "Hello", 12, "jQuery", true ];
var resultArray2 = $.grep( array2, function(value, i){ // 注意参数顺序与each()不同
    // value 表示当前迭代的数组元素
    // i 表示当前迭代元素的索引
    // this 指向全局对象(window)

    return i % 2 == 0; // 保留返回值不为false的元素
} );
// resultArray2 为 [ "Hello", "jQuery" ];

上面的方法全是静态方法。此外，jQuery还有两个同名的实例方法each()和map()，专门用于遍历jQuery对象匹配的所有元素。

// 遍历所有的p元素，并执行对应的函数
$("p").each(function(i, element){
    // i 表示当前迭代元素的索引
    // element 表示当前迭代的DOM元素
    // this === element     
});

// 返回包含所有匹配元素value值的数组
$(":checkbox:checked").map(function(i, element){
    // i 表示当前迭代元素的索引
    // element 表示当前迭代的DOM元素
    // this === element
    return this.value;      
});