今天看啥
热点:

【从0到1学jQuery】jQuery中each()和$.each()的使用,jquery.each


引子:

最近遇到一个问题,就是在each()函数中怎么模拟for循环中的break和continue的操作。所以就查看了jQuery关于这个函数的文档,并且总结一下。

演示代码如下:

<div>
        <ul>
            <li>你是第1个</li>
            <li>你是第2个</li>
            <li>你是第3个</li>
            <li>你是第4个</li>
            <li>你是第5个</li>
        </ul>
    </div>

需要的结果就是遍历整个li标签元素,当循环到“你是第2个”的时候continue执行到“你是第4个”标签的时候break;

1.$(selector).each()函数的使用

函数定义:

.each( function(index, Element) )

function(index, Element)
类型: Function()
为每个匹配元素执行的一个函数。

$(function() {
    $('li').each(function(index) {
        var innerText = $(this).text();
        if (innerText == '你是第2个') {
            //跳过本次循环,相当于continue
            return;
        } else if (innerText == '你是第4个') {
            //退出循环,相当于break;
            return false;
        }
        console.log(innerText);
    });
})

执行结果:

这里写图片描述

在函数体内部我们使用$(this)获取的是当前遍历到元素的jQuery对象,同样我们可以通过使用this获取普通的js对象。

看下面我们将断点打到函数的入口处,观察$(this)和this的输出:
这里写图片描述


2.$.each()函数的使用

$.each() 一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。

函数定义:

jQuery.each(array, callback )或者jQuery.each(object, callback )
array
类型: Array
遍历的数组。
object
类型: Object
遍历的对象。
callback
类型: Function( Integer indexInArray, Object value )
该函数会在每个对象上(迭代)调用。

执行代码:

$(function() {
        $.each($('li'), function(index, elem) {
            // console.log(index);
            // console.log(elem);
            var innerText =elem.innerText;
            if (innerText == '你是第3个') {
                return;
            } else if (innerText == '你是第5个') {
                return false;
            }
            console.log(innerText);

        })
    })

结果:
这里写图片描述

深入研究:
由上面的代码回调函数function(index, elem) 我们知道,其中的当遍历的是数组的时候indexelem分别是索引和索引值。

那么当我们遍历的是一个对象的时候呢?

看示例:

var testObject={
        name:'zhiqiang',
        age:'23',
        home:'haidian'
    }

    $(function(){
        $.each(testObject,function(keyObj,valueObj){
            console.log(keyObj,valueObj);
        })
    })

可以看到输出的结果是:

这里写图片描述

这里我们可以知道当$.each()函数去遍历一个对象的时候,这个时候回调函数的argument[0],argument[1]分别是对象的keyvalue

www.bkjia.comtruehttp://www.bkjia.com/webzh/1005710.htmlTechArticle【从0到1学jQuery】jQuery中each()和$.each()的使用,jquery.each 引子: 最近遇到一个问题,就是在each()函数中怎么模拟for循环中的break和continue的操...

相关文章

相关搜索: selector each jquery continue

帮客评论

视觉看点