循环

  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的循环机制,但不推荐使用!理由有:

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

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

posted @ 2016-10-25 19:58  webNick  阅读(417)  评论(0编辑  收藏  举报
好东西!绝不藏私!乐于分享!涨知识、增内涵、共同进步……
Copyright ©2016 webNick
↑返回顶部