【从0到1学Web前端】jQuery中each()和$.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) 我们知道，其中的当遍历的是数组的时候index和elem分别是索引和索引值。

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

看示例：

var testObject={        name:'zhiqiang',        age:'23',        home:'haidian'    }    $(function(){        $.each(testObject,function(keyObj,valueObj){            console.log(keyObj,valueObj);        })    })

可以看到输出的结果是：

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