循環 - puyongsong－IT工程師數位筆記本

文章出處

　　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的循環機制，但不推薦使用！理由有：