jquery中each的全面用法

        看了优秀的代码，发现用for的很少而用each的很多，因为each是在for的基础上面进行的封装，但是有的是$.each(vipCourse.has_course_vip, function(j, key2) {}这是什么意思？看不懂，经过学习总结如下，大家如果有什么好的建议，欢迎多多留言：

each有两种用法：

       第一种是：$.each(object,callback); object可以是数组，js对象，dom对象，json对象

       第二种是：$(selector）.each(callback);   callback是回调函数，跳出使用return false；return true和continue                           的用法一样，但是在each中只能使用return true；

                       callback的实体就是 function(index,element);

                            index:遍历的索引位置，从0开始，如果为json对象或对象属性，则此值为对应的key值或属性；

                            element：遍历得到的对象元素（）；

官方对each的解释是：

以每一个匹配的元素作为上下文来执行一个函数。意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整形）。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

示例代码：

遍历数组

// 定义一个一维数组

var names = ["张三","李四","王五"];

// 一维数组each读取

$("#each1Btn").click(function(){

    clearHtml();

    // 回调函数的参数说明：

    // i：数组索引，从0开始

    // obj：遍历得到的对象，可使用this代替，本例中为students里的元素

    /**

    // 第一种使用方式：

    $.each(names, function(i, obj) {

        $("#showContent").append("<br/>第"+i+"个元素为："+obj);

    });

    */

    // 第二种使用方式：

    // $(Object).each(callback);

    $(names).each(function(i, obj) {

        $("#showContent").append("<br/>第"+i+"个元素为："+this);

    });

});

遍历字符串对象

// 字符串对象遍历

$("#eachObjBtn").click(function(){

    clearHtml();

    var str = "G2room测试each遍历字符串";

    // 此时的obj为字符串的字符

    // 如果为数字或布尔，则无法遍历

    $.each(str, function(i, obj) {

        $("#showContent").append("<br/>"+obj);

    });

});

遍历dom对象

// DOM对象遍历

$("#eachDomBtn").click(function(){

    clearHtml();

    // 此时传入的对象为Jquery对象

    // 此时obj获取的DOM对象，如果要进行Jquery操作，需要转换为Jquery对象

    // 如下例中，可以使用$(obj).val()获取值

    $.each($("input[name='category']"), function(i, obj) {

        $("#showContent").append("<br/>Radio的值为："+obj.value);

        if($(obj).attr("checked")) {

            $("#showContent").append("，已选中");

        }

    });

});

遍历json对象

// DOM对象遍历

$("#eachDomBtn").click(function(){

    clearHtml();

    // 此时传入的对象为Jquery对象

    // 此时obj获取的DOM对象，如果要进行Jquery操作，需要转换为Jquery对象

    // 如下例中，可以使用$(obj).val()获取值

    $.each($("input[name='category']"), function(i, obj) {

        $("#showContent").append("<br/>Radio的值为："+obj.value);

        if($(obj).attr("checked")) {

            $("#showContent").append("，已选中");

        }

    });

});

each对javascript的for循环做了封装，附上Jquery源码如下

function( obj, callback, args ) {

    var value,

        i = 0,

        length = obj.length,

        isArray = isArraylike( obj );

 

    if ( args ) {

        if ( isArray ) {

            for ( ; i < length; i++ ) {

                value = callback.apply( obj[ i ], args );

 

                if ( value === false ) {

                    break;

                }

            }

        } else {

            for ( i in obj ) {

                value = callback.apply( obj[ i ], args );

 

                if ( value === false ) {

                    break;

                }

            }

        }

        // A special, fast, case for the most common use of each

    } else {

        if ( isArray ) {

            for ( ; i < length; i++ ) {

                value = callback.call( obj[ i ], i, obj[ i ] );

 

                if ( value === false ) {

                    break;

                }

            }

        } else {

            for ( i in obj ) {

                value = callback.call( obj[ i ], i, obj[ i ] );

                if ( value === false ) {

                    break;

                }

            }

        }

    }

    return obj;

}

本文转载至：http://g2room.com/index.php/archives/62