循环

　　jquery的.each()循环可以循环数组和对象，有2种写法，第二种该方法用来让DOM循环结构更简单更不易出错。它会迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。更重要的是，回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 this 总是指向这个元素。

一、$.each()

写法：

$..each(obj, function(i, v) )

　　参数介绍：

　　obj--要循环的量
　　i--index
　　v--value

循环数组：

var arr=['a','b'];
    $.each(arr,function(i,v){
        console.log(i);
        console.log(v);
    });

　　则打印结果为：

i--　　0 　　1

v--　　a　　b

循环2维数组：

var arr2=[[1,2],[11,22]];
    $.each(arr2,function(i,v){
        console.log(i);
        console.log(v);
    });

　　则打印结果为：

i--　　0 　　1

v--　　[1,2]　　[11,22]

循环对象：

var obj={a:'aa',b:'bb'};
    $.each(obj,function(i,v){
        console.log(i);
        console.log(v);
    });

　　则打印结果为：

i--　　b　　b

v--　　aa　　bb

jquery的.each()循环自动判断出数组或对象，后面有简介。

$.each()这种方法不支持dom选取，只能将要循环的量作为参数，操作dom将运用到方法二。

二、$().each()

写法：

$(elm).each(function(i,v){})

　直接上代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<ul class="ul1">
    <li>my</li>
    <li>name</li>
    <li>is</li>
    <li>nick</li>
</ul>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script>
    $('.ul1 li').each(function(i,v){
        console.log(i);
        console.log($(v).html());
    });
</script>
</body>
</html>

　　则打印结果为：

i--　　0　　1　　2　　3

v--　　my name is nick

下面附上jqeury源码供参考：

function each( 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;
    }

    function isArraylike( obj ) {
        var length = obj.length,
                type = jQuery.type( obj );
        if ( type === "function" || jQuery.isWindow( obj ) ) {
            return false;
        }
        if ( obj.nodeType === 1 && length ) {
            return true;
        }
        return type === "array" || length === 0 ||
                typeof length === "number" && length > 0 && ( length - 1 ) in obj;
    }

　　forEach是javascript原生的类似于jquery的循环机制，但不推荐使用！理由有：

不兼容某些老顽固浏览器，如ie8
只能循环数组，对象就不行了

如果你没有使用jquery，循环的话就用for或者for……in吧！

posted @ 2016-10-25 19:58 webNick 阅读(434) 评论(0) 收藏举报

webNick

循环

一、$.each()

二、$().each()

公告